Angular 12 Dynamic Events FullCalendar Tutorial with Example

Angular fullcalendar integration with dynamic events example; In this tutorial, i am going to show you how do you integrate fullcalendar and create, show dynamic events on fullcalendar in angular 12 app.

FullCalendar is a lightweight yet powerful and developer-friendly JavaScript library to create flexible, draggable event calendars on the modern web app. Note that the FullCalendar now works as a Vanilla (ES6) JavaScript since v4, which removes jQuery and moment as dependencies.

Build and Display Dynamic Events in Angular 12 FullCalendar

• Step 1 – Create New Angular App
• Step 2 – Install FullCalendar Package
• Step 3 – Import Modules on App.Module.ts File
• Step 4 – Add Code on View File
• Step 5 – Add Code On app.Component ts File
• Step 6 – Create Dynamic Events in Angular
• Step 7 – Start the Angular App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Install FullCalendar Package

Execute the following command on terminal to install NPM package called @fullcalendar/angular for implement fullcalendar in angular app:

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

Step 3 – Import Modules on App.Module.ts File

Import modules; so go to src/app directory and open app.module.ts file. And then add the following lines of into app.module.ts file:

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

Step 4 – Add Code on View File

Create fullcalendar in angular app. So, go to src/app/ and app.component.html and update the following code into it:

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

Step 5 – Add Code On app.Component ts File

Go to src/app directory and open app.component.ts. Then add the following code into component.ts file:

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

Step 6 – Create Dynamic Events in Angular

In this step, you need to create event.php file and place the following code in the file:

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

Step 7 – Start the Angular App

Execute the following command on terminal to start angular fullcalendar npm app:

ng serve

Recommended Angular Tutorials