Create Events Dynamically in Angular 12 with FullCalendar

How do I Integrate FullCalendar in Angular 12 to add events dynamically? If that’s your question, you are at the right place.

This quick tutorial will demonstrate how you can eloquently create an event calendar in the Angular 12 application and add events dynamically in angular using the extremely popular FullCalendar package from the beginning.

Ideally, the event calendar is advantageous in organizing events that will take place in the future; in this quick yet illustrative tutorial, we will teach how to easily add an event calendar in angular with the help of FullCalender and manage events dynamically special days, meetings, etc.

Angular 12 FullCalendar Integration Example

  • Step 1: Download Angular Project
  • Step 1: Install Calendar Plugins
  • Step 1: Update FullCalendar Dependencies in AppModule
  • Step 1: Add Angular PHP Dynamic Events File
  • Step 1: Add FullCalendar in Angular
  • Step 1: Update App Component HTML File
  • Step 1: View Angular Calendar App

Download Angular Project

You need to have angular cli ready to go ahead with angular, use the provided command to install the tool.

npm install -g @angular/cli

Further, you are ready to install the angular app; after installation, get inside the angular project.

ng new angular-calednar-app
cd angular-calednar-app

Install Fullcalendar Plugins

The second and the most essential step is to add the FullCalendar package and the related dependencies.

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

Update FullCalendar Dependencies in AppModule

Now, add the FullCalendarModule into your angular app’s root module. You must register all the calendar-related plugins with the FullCalendar module and register the FullCalendar module with your app.

Update 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 calendar + http 
import { HttpClientModule } from '@angular/common/http';
import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';
import { FullCalendarModule } from '@fullcalendar/angular';


FullCalendarModule.registerPlugins([ 
  interactionPlugin,
  dayGridPlugin
]);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FullCalendarModule,
    HttpClientModule    
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Please note, import of @fullcalendar/angular must go before any of the FullCalendar plugins otherwise, you may get a runtime error.

Add Angular PHP Dynamic Events File

To create dynamic events in angular, please create a new file, name it dynamic-events.php, place the entier given code in this file.

Make sure to keep this file in the PHP server’s htdocs directory; this will help you handle the dynamic events.

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

$dynamicEvt = array('title' => 'Event', 'start' => '2021-06-25');

echo json_encode($dynamicEvt);

Add FullCalendar in Angular

This section will describe how to add methods and events to build the calendar component in angular.

Hence, update app.component.ts file with the given 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: any = [];
    
    calendarOptions: CalendarOptions = {
        initialView: 'dayGridMonth'
    };

    constructor(
        private httpClient: HttpClient
    ) { }

    onDateSelect(arg: any) {
      alert('Date clicked: ' + arg.dateStr)
    }

    ngOnInit(){
        setTimeout(() => {
            return this.httpClient.get('http://localhost:8888/dynamic-events.php')
            .subscribe((res: any) => {
                this.Events.push(res);
                console.log(this.Events);
            });
        }, 2500);

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

}

Update App Component HTML File

Let’s head over to the app component HTML file, first import the needed services (we will prepare the ts file later), then create an object of options bind that option with the full-calendar directive.

Update app.component.html file.

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

View Angular Calendar App

Next, you can type the provided command and hit enter to start the angular application; this command will automatically open the angular app in the browser.

ng serve --open

Angular fullcalendar dynamic events

Conclusion

Now, we have discovered every step required to add dynamic events in angular; moreover, we explained how to implement FullCalendar in angular to create events to manage your time.