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 files -
watch- build & watch development dist files -
start- run a simple example application -
test- test headlessly -
test:dev- test interactively clean