FullCalendarAn event calendar based on the FullCalendar library.

Documentation

Import

import {FullCalendarModule} from 'primeng/fullcalendar';
 

Getting Started

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

npm install @fullcalendar/core --save
 

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
 

Events should be an array and defined using the events property.

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

export class MyModel {
    events: any[];
    ngOnInit() {
        this.events = [
            {
                "title": "All Day Event",
                "start": "2016-01-01"
            },
            {
                "title": "Long Event",
                "start": "2016-01-07",
                "end": "2016-01-10"
            },
            {
                "title": "Repeating Event",
                "start": "2016-01-09T16:00:00"
            },
            {
                "title": "Repeating Event",
                "start": "2016-01-16T16:00:00"
            },
            {
                "title": "Conference",
                "start": "2016-01-11",
                "end": "2016-01-13"
            }
        ];
    }
}
 

In a real application, it is likely to populate the events by making a service call, when the events are updated, the component will detect the change and render them.

@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; });
    }
}
 

export class MyModel {
    events: any[];
    ngOnInit() {
        this.eventService.getEvents().then(events => {this.events = events;});
    }
}
 

Options

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

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: 'month,agendaWeek,agendaDay'
            }
        {;
    }
}
 

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

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);
}
 

Properties

Dependencies

FullCalendar.

Source

View on GitHub

<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: 'month,agendaWeek,agendaDay'
            },
            editable: true
        };
    }
}
 

@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; });
    }
}