FullCalendar Integration in Angular 12

fullcalendar/angular 12 integration example; In this tutorial, i am going to show you complete guide on how to integrate or implement fullcalender 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.

How to Integrate FullCalendar in Angular 12 App

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

Step 1 – Create New Angular App

Execute the following command on terminal to install angular app:

ng new my-new-app

Step 2 – Install FullCalendar Package

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

npm install --save @fullcalendar/angular @fullcalendar/daygrid 
npm i @fullcalendar/interaction

Step 3 – Import Modules n 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 { FullCalendarModule } from '@fullcalendar/angular'; 
import dayGridPlugin from '@fullcalendar/daygrid'; 
import interactionPlugin from '@fullcalendar/interaction'; 
FullCalendarModule.registerPlugins([ 
  dayGridPlugin,
  interactionPlugin
]);
...
  imports: [
    ...
  FullCalendarModule 
  ],
 ...

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:

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

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 { CalendarOptions } from '@fullcalendar/angular'; // useful for typechecking
export class AppComponent {
  ...
  calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    dateClick: this.handleDateClick.bind(this), // bind is important!
    events: [
      { title: 'event 1', date: '2020-06-27' },
      { title: 'event 2', date: '2020-06-30' }
    ]
  };
  handleDateClick(arg) {
    alert('date click! ' + arg.dateStr)
  }
}

Step 6 – Start the Angular App

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

ng serve

Recommended Angular Tutorials

Leave a Comment