Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 11 FullCalendar Working Demo.

The main purpose of making this post is fullcalendar has been updated to version 5.

---

Angular11 came and if you are new then you must check below two links:

1. Angular 11 Tutorials

---

Here is the code snippets for Angular 11 FullCalendar Working Demo and please use carefully:

1. Very first, here are common basics steps to add angular 11 application on your machine:

$ npm install -g @angular/cli

$ ng new angularfullcalendar // Set Angular 11 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 11 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