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.