Vue3 FullCalendar

Vue3 FullCalendar is an event calendar based on the FullCalendar library. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import FullCalendar from 'primevue/fullcalendar';

Getting Started

FullCalendar is a wrapper around on FullCalendar 5.4.0+ so fullcalendar 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.

<FullCalendar :events="events" />

export default {
    data() {
        return {
            events: [
                {
                    "id": 1,
                    "title": "All Day Event",
                    "start": "2019-01-01"
                },
                {
                    "id": 2,
                    "title": "Long Event",
                    "start": "2019-01-07",
                    "end": "2019-01-10"
                },
                {
                    "id": 3,
                    "title": "Repeating Event",
                    "start": "2019-01-09T16:00:00"
                },
                {
                    "id": 4,
                    "title": "Repeating Event",
                    "start": "2019-01-16T16:00:00"
                },
                {
                    "id": 5,
                    "title": "Conference",
                    "start": "2019-01-11",
                    "end": "2019-01-13"
                },
                {
                    "id": 6,
                    "title": "Meeting",
                    "start": "2019-01-12T10:30:00",
                    "end": "2019-01-12T12:30:00"
                }
            ]
        };
    }
}

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

import axios from 'axios';

export default class EventService {

    getEvents() {
        return axios.get('demo/data/events.json').then(res => res.data.data);
    }

}

import EventService from '../../service/EventService';

export default {
    data() {
        return {
            events: null
        };
    },
    eventService: null,
    created() {
        this.eventService = new EventService();
    },
    mounted() {
        this.eventService.getEvents().then(data => this.events = data);
    }
}

Options

FullCalendar has a long list of customization parameters that can be defined with the options property. Example below customizes the plugins, header and editable properties.

<FullCalendar :events="events" :options="options" />

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

export default {
    data() {
        return {
            options: {
                plugins:[dayGridPlugin, timeGridPlugin, interactionPlugin],
                initialDate: '2019-01-01',
                headerToolbar: {
                    left: 'prev,next',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                editable: true
            },
            events: null
        };
    },
    eventService: null,
    created() {
        this.eventService = new EventService();
    },
    mounted() {
        this.eventService.getEvents().then(data => this.events = data);
    }
}

Callbacks

Callbacks of the FullCalendar such as dateClick are also defined with the options property.

export default {
     data() {
        return {
            options: {
                plugins:[dayGridPlugin, timeGridPlugin, interactionPlugin],
                initialDate: '2019-01-01',
                headerToolbar: {
                    left: 'prev,next',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                editable: true,
                dateClick: (e) =>  {
                    //handle date click
                }
            }
        };
    }
}

Theming

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

Resources

Visit the PrimeVue FullCalendar showcase for demos and documentation.