Angular 12 FullCalendar Example - Create & Display Dynamic Events

FullCalendar example tutorial in Angular. In this tutorial, we will discuss how to integrate the Fullcalendar package module in the Angular application and display dynamically created events on the fly.

We will go through step by step tutorial on how to dynamically fetch the events from a simple PHP file using JSON format data. After that, we will incorporate the FullCalender plugin into the Angular module and configure it to show the dynamic event management behaviour in the Angular app.

How to Dynamically Integrate FullCalendar in Angular Application?

Step 1) Create Angular Application
Step 2) Install FullCalendar Packages
Step 3) Configure App Module File
Step 4) Setup Dynamic Events in Application
Step 5) Serve Application

Create Angular Application

To create a new Angular project, make sure you have installed Angular CLI. Install it by executing the below npm command in the terminal

npm install -g @angular/cli

After that, run the following ng command in the Angular CLI to create a new Angular application

ng new angular-fullcalendar-event-app

Change to the project directory

cd angular-fullcalendar-event-app

Install FullCalendar Packages

After setting up the Angular project, execute the following npm command to install the required packages for Fullcalendar

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

Configure App Module File

Now, we will import the required Modules into AppModule of our application. Import HttpClientModule, FullCalendarModule, interactionPlugin and dayGridPlugin in the 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 { 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 { }

Setup Dynamic Events in Application

Next, open the app.component.ts file and update it with the following code.

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('You clicked on : ' + res.dateStr)
    }

    ngOnInit(){
      setTimeout(() => {
        return this.httpClient.get('http://localhost:3000/my_events.php')
          .subscribe(res => {
              this.Events.push(res);
              console.log(this.Events);
          });
      }, 1200);

      setTimeout(() => {
        this.calendarOptions = {
          initialView: 'dayGridMonth',
          dateClick: this.onDateClick.bind(this),
          events: this.Events
        };
      }, 3500);
          
      }  
}

Above, we have set up setTimeout events to fetch events dynamically from the PHP file we specified and update the FullCalendar components.

update the app.component.html template file with the below code.

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

Finally, to showcase the demo, we will create a simple PHP file called my_events.php. Thereafter, update it with the following code

<?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-01-31');
echo json_encode($calendarEvents);

Serve Application

We are done with our FullCalendar setup and configuration, lets start the Angular application local server by hitting the below command

ng serve --open

You can visit this suggested URL to see the application up and running.

Conclusion

We discussed creating a dynamic FullCalender component to create and display events dynamically. Here for demo purposes, we used a PHP file by in a real application you can easily connect the Full Calendar component to fetch details from a real database of saved records.

Category: Angular

Angular 12 FullCalendar Example – Create & Display Dynamic Events