FullcalendarをAngularに統合する方法

このチュートリアルでは、フルカレンダーをAngular 13アプリに統合し、動的データまたはイベントをフルカレンダーに表示する方法を学習します。

新しいAngularアプリを作成する

まず、ターミナルを開き、次のコマンドを実行して、Angularアプリをインストールします。

ng new my-new-app

FullCalendarライブラリをインストールします

次に、@ fullcalendar / angleというNPMパッケージをインストールして、Angularアプリにfullcalendarを実装します。したがって、ターミナルで次のコマンドを実行することにより、パッケージをインストールできます。

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

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 { }

ビューファイルにコードを追加

Angular13アプリでフルカレンダーを作成します。したがって、src / app /とapp.component.htmlにアクセスして、次のコードを更新します。

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

app.Componenttsファイルにコードを追加します

src / appディレクトリにアクセスし、app.component.tsを開きます。次に、次のコードをcomponent.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);
           
      }  
 
}

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);

Angularアプリを起動します

ターミナルで次のコマンドを実行して、angularfullcalendarnpmアプリを起動します。

ng serve

Buddha Community

FullCalendarライブラリをインストールします

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

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 { }

app.Componenttsファイルにコードを追加します

src / appディレクトリにアクセスし、app.component.tsを開きます。次に、次のコードをcomponent.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); } }

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);

FullcalendarをAngularに統合する方法

新しいAngularアプリを作成する

FullCalendarライブラリをインストールします

App.Module.tsファイルにコードを追加する

ビューファイルにコードを追加

app.Componenttsファイルにコードを追加します

Angularで動的イベントを作成する

Angularアプリを起動します

What is GEEK

Buddha Community