FullCalendar Angular Component

Before using the component, you must import FullCalendarModule into your application's module (usually AppModule).

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 { }

To use FullCalendar in an Angular application, you must install the Angular connector (@fullcalendar/angular), the core engine (@fullcalendar/core), and the specific plugins you intend to use (e.g., @fullcalendar/daygrid).

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

To use the FullCalendar component in your Angular application, you must import the FullCalendarModule into your component's module or standalone component. This module exports the FullCalendarComponent, which is the primary entry point for rendering a calendar.

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

@NgModule({
  imports: [
    FullCalendarModule
    // ... other imports
  ],
  // ...
})
export class MyModule { }

Once registered, use the <full-calendar> component in your templates. You must bind an [options] property to an object of type CalendarOptions. This object configures plugins, views, and event data.

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 customize how specific parts of the calendar are rendered by providing nested Angular templates inside the <full-calendar> component. For example, use #eventContent to customize the appearance of event elements.

<full-calendar [options="calendarOptions">
  <ng-template #eventContent let-arg>
    <b>{{arg.timeText}}</b>
    <i>{{arg.event.title}}</i>
  </ng-template>
</full-calendar>

The FullCalendar Angular component uses deep change detection for specific configuration properties to ensure updates are correctly reflected in the underlying FullCalendar instance. When these properties change, the component performs a deep comparison rather than a simple reference check.

The following options are subject to deep change detection:

• headerToolbar
• footerToolbar
• events
• eventSources
• resources

// Options subject to deep change detection:
// headerToolbar, footerToolbar, events, eventSources, resources

To interact directly with the underlying FullCalendar instance (e.g., to call methods like .next(), .prev(), or .refetchEvents()), use the getApi() method on the FullCalendarComponent instance.

// In your Angular component
@ViewChild('calendar') calendarComponent!: FullCalendarComponent;

nextMonth() {
  const calendarApi = this.calendarComponent.getApi();
  calendarApi.next();
}

The FullCalendarComponent (selector: full-calendar) is the primary way to integrate FullCalendar into an Angular application. You can configure the calendar using a single options object or by using specific individual @Input properties for common data like events, eventSources, and resources.

<!-- Basic usage with options object -->
<full-calendar [options="calendarOptions"></full-calendar>

<!-- Usage with individual inputs -->
<full-calendar 
  [events="myEvents" 
  [eventSources="mySources" 
  [resources="myResources">
</full-calendar>

The FullCalendar Angular component exposes the following primary input properties for data binding. These properties allow you to pass calendar data directly into the component:

• events: An array or object defining the events to be displayed.
• eventSources: An array of event sources.
• resources: An array of resources used for scheduling (e.g., in resource-based views).

// Available @Input() names:
// 'events'
// 'eventSources'
// 'resources'