Angular FullCalendar

Angular FullCalendar is an event calendar based on the FullCalendar library.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {FullCalendarModule} from 'primeng/fullcalendar';

Getting Started

FullCalendar is a wrapper around on FullCalendar 4.1.0+ so FullCalendar core needs to be included in your project. For complete documentation and samples please refer to the FullCalendar website.

npm install @fullcalendar/core --save

Plugins

FullCalendar is plugin based so install the plugins you require and define them with the options property.

npm install @fullcalendar/daygrid --save
npm install @fullcalendar/timegrid --save
npm install @fullcalendar/interaction --save

Styles of the core and plugins required can be defined in angular.json or with CSS imports.

"styles": [
    "node_modules/@fullcalendar/core/main.min.css",
    "node_modules/@fullcalendar/daygrid/main.min.css",
    "node_modules/@fullcalendar/timegrid/main.min.css",
    //...

Event API

Events should be an array and defined using the events property. In this example, we'll be utilizing a service to load our data. See the documentation for more information about the Event API.

@Injectable()
export class EventService {

    constructor(private http: Http) {}

    getEvents() {
        return this.http.get('showcase/resources/data/calendarevents.json')
                    .toPromise()
                    .then(res => <any[]> res.json().data)
                    .then(data => { return data; });
    }
}

Sample events data as JSON.

{
    "data": [
        {
            "id": 1,
            "title": "All Day Event",
            "start": "2017-02-01"
        },
        {
            "id": 2,
            "title": "Long Event",
            "start": "2017-02-07",
            "end": "2017-02-10"
        },
        {
            "id": 3,
            "title": "Repeating Event",
            "start": "2017-02-09T16:00:00"
        },
        //...

Putting It Together

FullCalendar has a long list of customization parameters that are defined with the options property. Example below customizes the views, defaultDate and header.

<p-fullCalendar [events]="events" [options]="options"></p-fullCalendar>

import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

export class FullCalendarDemo implements OnInit {

    events: any[];

    options: any;

    constructor(private eventService: EventService) { }

    ngOnInit() {
        this.eventService.getEvents().then(events => {this.events = events;});

        this.options = {
            plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
            defaultDate: '2017-02-01',
            header: {
                left: 'prev,next',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            }
        }
    }

}

Change Detection

Updates to the events or options are reflected to the UI whenever a change occurs. An important note here is that UI update only happens whenever a new instance is created on these twp properties. Simply changing the events array without creating a new instance of the array or updating a property inside options will have no effect.

update() {
    //incorrect
    this.events.push({
        "title": "Conference",
        "start": "2016-01-11",
        "end": "2016-01-13"
    });

    //correct
    this.events = [...this.events, {
        "title": "Conference",
        "start": "2016-01-11",
        "end": "2016-01-13"
    }];

    //incorrect
    this.options.weekends = false;

    //correct
    this.options = {...this.options, weekends: false};
}

Callbacks

Callbacks of the FullCalendar are also defined with the options property.

this.options = {
    plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
    header: {
        left: 'prev,next',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    dateClick: (e) =>  {
        //handle date click
    }
}

Methods

Methods of the underlying calendar instance is accessible using the reference of the components getCalendar() API.

<p-fullCalendar #fc [events]="events" [options]="options"></p-fullCalendar>

@ViewChild('fc') fc: FullCalendar;

gotoDate(date: Date) {
    this.fc.getCalendar().gotoDate(date);
}

Theming

FullCalendar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG FullCalendar showcase for demos and documentation.