DEV Community

loading...
Cover image for Vue3 FullCalendar

Vue3 FullCalendar

primetek profile image PrimeTek ・2 min read

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

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

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

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

<FullCalendar :events="events" />
Enter fullscreen mode Exit fullscreen mode
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"
                }
            ]
        };
    }
}
Enter fullscreen mode Exit fullscreen mode

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

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

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

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
                }
            }
        };
    }
}
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 PrimeVue FullCalendar showcase for demos and documentation.

Discussion (0)

pic
Editor guide