DEV Community

loading...
Cover image for Angular FullCalendar

Angular FullCalendar

primetek profile image PrimeTek ・3 min read

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';
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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",
    //...
Enter fullscreen mode Exit fullscreen mode

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; });
    }
}
Enter fullscreen mode Exit fullscreen mode

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"
        },
        //...
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
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'
            }
        }
    }

}
Enter fullscreen mode Exit fullscreen mode

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};
}
Enter fullscreen mode Exit fullscreen mode

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
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
@ViewChild('fc') fc: FullCalendar;

gotoDate(date: Date) {
    this.fc.getCalendar().gotoDate(date);
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide