FullCalendar seamlessly integrates with the Angular 7. It provides a component that exactly matches the functionality of FullCalendar’s standard API.

Install

---

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

After Installing, include FullCalendarModule in your AppsModule class in apps.module.ts would look like this:

---

                         	
import { FullCalendarModule } from '@fullcalendar/angular';

@NgModule({
  imports: [
    ...,
    FullCalendarModule
  ],
})
export class AppsModule { }

							
						

ApexchartComponent class in apexchart.component.ts would look like this

---

  
import { Component } from '@angular/core';
import dayGridPlugin from '@fullcalendar/daygrid';

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

  calendarPlugins = [dayGridPlugin]; // important!

}
							
						

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 defaultView="dayGridMonth" [plugins]="calendarPlugins"></full-calendar>
							
						

You must manually include the stylesheets for FullCalendar’s core and plugins. One way to do this is to include them from your project’s global scss stylesheet in scss/apps/_calendar.scss:

---

                         	
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
							
						

Type	URL
apex chart	https://fullcalendar.io/docs/angular