The first step is to install the FullCalendar-related dependencies. You’ll need the Angular adapter and any additional plugins you plan to use:

Install

---

                         	
npm install --save @fullcalendar/angular @fullcalendar/core @fullcalendar/daygrid
							
						

After Installing, include FullCalendarModule in your calendar.module.ts would look like this:

---

                                    
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FullCalendarModule } from '@fullcalendar/angular'; // the main connector. must go first
import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin
import interactionPlugin from '@fullcalendar/interaction'; // a plugin
import { AppComponent } from './app.component';

FullCalendarModule.registerPlugins([ // register FullCalendar plugins
    dayGridPlugin,
    interactionPlugin
]);

@NgModule({
    declarations: [
    AppComponent
    ],
    imports: [
    BrowserModule,
    FullCalendarModule // register FullCalendar with you app
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

							
						

Then, in one of your app’s component files (calendar.component.ts), you must prepare an object of options:

---

                                    
import { Component } from '@angular/core';
import { CalendarOptions } from '@fullcalendar/angular'; // useful for typechecking

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {

    calendarOptions: CalendarOptions = {
        initialView: 'dayGridMonth'
    };

}
							
						

Then, in your component’s template file calendar.component.html, you have access to the <full-calendar> tag. You must pass your plugins into this declaration!

---

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

Type	URL
Fullcalendar	https://fullcalendar.io/docs/angular