Hello to all, welcome to therichpost.com. In this post, I will tell you, How to implement FullCalendar in Angular 9/10 ?
The main purpose of making this post is fullcalendar has been updated to version 5.
Angular10 came and if you are new then you must check below two links:
Here is the code snippets and please use carefully:
1. Very first, here are common basics steps to add angular 9 application on your machine:
$ npm install -g @angular/cli $ ng new angularfullcalendar // Set Angular 9 Application on your pc cd angularfullcalendar // Go inside project folder
ng serve // Run project http://localhost:4200/ //Check working Local server
2. Now run below commands to set fullcalendar modules into your angular 9 application:
npm install --save @fullcalendar/angular @fullcalendar/daygrid npm i @fullcalendar/interaction
3. Now add below code into your 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 ], ...
4. Now add below code into your app.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) } }
5. Finally add below code into your app.component.html file:
<full-calendar [options]="calendarOptions"></full-calendar>
Now we are done friends and please run ng serve command and if you have any kind of query then please do comment below.
Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.
I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.
Jassa
Thanks
Leave a Reply