Интеграция FullCalendar в приложения Angular

Интеграция FullCalendar — это процесс включения библиотеки JavaScript FullCalendar в приложение Angular. FullCalendar — популярная библиотека для создания интерактивных календарей. Он предоставляет ряд функций, таких как возможность отображать события, перетаскивать события и настраивать внешний вид календаря.

В этом уроке мы узнаем, как интегрировать полный календарь в приложения Angular 14 и отображать динамические данные или события в полном календаре. Чтобы полностью интегрировать календарь в приложение Angular 14, выполните следующие действия.

• Шаг 1. Создайте новое приложение Angular
• Шаг 2. Установите библиотеку FullCalendar
• Шаг 3. Добавьте код в файл App.Module.ts
• Шаг 4. Добавьте код при просмотре файла
• Шаг 5. Добавьте код в файл app.Component ts
• Шаг 6. Создайте динамические события в Angular
• Шаг 7. Запустите приложение Angular.

Шаг 1. Создайте новое приложение Angular

Прежде всего, откройте свой терминал и выполните на нем следующую команду, чтобы установить приложение Angular:

ng new my-new-app

Шаг 2. Установите библиотеку FullCalendar

Затем установите пакет NPM под названием @fullcalendar/angular, чтобы реализовать Fullcalendar в приложениях Angular. Итак, вы можете установить пакеты, выполнив на терминале следующие команды:

 npm install @fullcalendar/angular 
 npm install @fullcalendar/daygrid
 npm install @fullcalendar/interaction

Шаг 3. Добавьте код в файл App.Module.ts

Посетите каталог src/app и откройте файл app.module.ts . Затем добавьте следующие строки в файл app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
 
// import modules
import { HttpClientModule } from '@angular/common/http';
 
import { FullCalendarModule } from '@fullcalendar/angular'; 
import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';
 
FullCalendarModule.registerPlugins([ 
  interactionPlugin,
  dayGridPlugin
]);
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FullCalendarModule,
    HttpClientModule    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
 
export class AppModule { }

Шаг 4. Добавьте код при просмотре файла

Создайте полный календарь в приложении angular 14. Итак, посетите src/app/ и app.comComponent.html и обновите в них следующий код:

<div class="container">
  <full-calendar [options]="calendarOptions"></full-calendar>
</div>

Шаг 5. Добавьте код в файл app.Component ts

Посетите каталог src/app и откройте app.comComponent.ts . Затем добавьте следующий код в файл компонент.ts:

import { Component } from '@angular/core';
 
import { HttpClient } from '@angular/common/http';
import { CalendarOptions } from '@fullcalendar/angular';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
 
export class AppComponent {
 
    Events = [];
    calendarOptions: CalendarOptions;
     
    constructor(private httpClient: HttpClient) { }
 
    onDateClick(res) {
      alert('Clicked on date : ' + res.dateStr)
    }
 
    ngOnInit(){
      setTimeout(() => {
        return this.httpClient.get('http://localhost:8888/event.php')
          .subscribe(res => {
              this.Events.push(res);
              console.log(this.Events);
          });
      }, 2200);
 
      setTimeout(() => {
        this.calendarOptions = {
          initialView: 'dayGridMonth',
          dateClick: this.onDateClick.bind(this),
          events: this.Events
        };
      }, 2500);
           
      }  
 
}

Шаг 6. Создайте динамические события в Angular

Создайте  файл event.php  и обновите в нем следующий код:

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
 
$calendarEvents = array('title' => 'Event name', 'start' => '2021-05-10');
 
echo json_encode($calendarEvents);

Шаг 7. Запустите приложение Angular.

Выполните следующую команду на терминале, чтобы запустить приложение Angular Fullcalendar npm:

ng serve

Теперь запустите и протестируйте его!