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