Angular 16 FullCalendar Create and Display Dynamic Events

Angular full calendar integration tutorial; Throughout this tutorial, we will learn how to implement the Fullcalendar package in the Angular 16 application and how to create dynamic events in Angular using the profound FullCalendar JavaScript plugin.

We will give you a shorter demo of dynamic events and create a basic php file and run it to fetch the events through the JSON mechanism.

Apart from the fullcalendar package, we will use the rest of the other modules and API to add an event calendar in the Angular application.

Angular FullCalendar Dynamic Events Tutorial

• Step 1: Create Angular Project
• Step 2: Install Fullcalendar Packages
• Step 3: Update AppModule File
• Step 4: Create Dynamic Events in Angular
• Step 5: Start Development Server

Create Angular Project

First, open the terminal, type command on the command prompt and install the Angular CLI.

npm install -g @angular/cli

Secondly, execute the following command to install the angular project.

ng new angular-calednar-event

Move to the project’s root.

cd angular-calednar-event

Install Fullcalendar Packages

Next, you have to use suggested commands to install full calendar packages into the angular project.

npm install @fullcalendar/angular @fullcalendar/core @fullcalendar/daygrid

Update AppModule File

In this step, we need to import HttpClientModule, FullCalendarModule, interactionPlugin and dayGridPlugin in the app module class.

So add the following code inside the app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// import modules
import { HttpClientModule } from '@angular/common/http';
import { FullCalendarModule } from '@fullcalendar/angular';
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FullCalendarModule, // register FullCalendar with your app
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Create Dynamic Events in Angular

Open app.component.ts file and place the following code.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CalendarOptions } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  Events: any[] = [];
  calendarOptions: CalendarOptions = {
    plugins: [dayGridPlugin, interactionPlugin],
    initialView: 'dayGridMonth',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
    },
    weekends: true,
    editable: true,
    selectable: true,
    selectMirror: true,
    dayMaxEvents: true,
  };
  constructor(private httpClient: HttpClient) {}
  onDateClick(res: any) {
    alert('Clicked on date : ' + res.dateStr);
  }
  ngOnInit() {
    setTimeout(() => {
      return this.httpClient
        .get('http://localhost:8888/event.php')
        .subscribe((res: any) => {
          this.Events.push(res);
          console.log(this.Events);
        });
    }, 2200);
    setTimeout(() => {
      this.calendarOptions = {
        initialView: 'dayGridMonth',
        events: this.Events,
        dateClick: this.onDateClick.bind(this),
      };
    }, 2500);
  }
}

Open app.component.html file and add the given below code.

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

Ultimately, for the demo purpose we need to create a PHP file so make sure your PHP development server is running after that 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-04-11');
echo json_encode($calendarEvents);

Start Development Server

Finally, we need to start the angular development server using the ng command, so execute the below command.

ng serve --open

Start browser and type the given url to run the app.

http://localhost:4200

Conclusion

Angular full calendar tutorial is over. In general, in this tutorial, we tried to understand the process of installing and setting up the full calendar plugin that allows us to create a basic calendar for creating events in the angular app.

We hope you liked this guide and share it with others.