The official Angular Component for FullCalendar
Install the Angular connector, the core package, and any plugins (like daygrid):
npm install @fullcalendar/angular @fullcalendar/core @fullcalendar/daygridFirst, connect FullCalendarModule to your app module:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FullCalendarModule } from '@fullcalendar/angular'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FullCalendarModule // register FullCalendar with your app ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }Then, use the full-calendar component, supplying an options object:
import { Component } from '@angular/core'; import { CalendarOptions } from '@fullcalendar/core'; import dayGridPlugin from '@fullcalendar/daygrid'; @Component({ selector: 'app-root', templateUrl: ` <div> <h1>Demo App</h1> <full-calendar [options]="calendarOptions"></full-calendar> </div> `, styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { plugins: [dayGridPlugin], initialView: 'dayGridMonth', weekends: false, events: [ { title: 'Meeting', start: new Date() } ] }; }You can even supply nested templates:
<full-calendar [options]="calendarOptions"> <ng-template #eventContent let-arg> <b>{{arg.timeText}}</b> <i>{{arg.event.title}}</i> </ng-template> </full-calendar>@fullcalendar/angular version 6 supports Angular 12 - 20
This project is built and maintained by irustm in partnership with the maintainers of FullCalendar. The project was originally called ng-fullcalendar which can still be found on NPM.
You must install this repo with PNPM:
pnpm install Available scripts (via pnpm run <script>):
build- build production-ready dist fileswatch- build & watch development dist filesstart- run a simple example applicationtest- test headlesslytest:dev- test interactivelyclean