FullCalendar Vue library is fully compatible with PrimeVue themes.
+PrimeVue provides theming for the FullCalendar Vue component.
-import FullCalendar from 'primevue/fullcalendar';
-
-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);
- }
-}
-
-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 today',
- center: 'title',
- right: 'dayGridMonth,timeGridWeek,timeGridDay'
- },
- editable: true,
- selectable:true,
- selectMirror: true,
- dayMaxEvents: true
- },
- events: null
- };
- },
- eventService: null,
- created() {
- this.eventService = new EventService();
- },
- mounted() {
- this.eventService.getEvents().then(data => this.events = data);
- }
-}
-
-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 today',
- center: 'title',
- right: 'dayGridMonth,timeGridWeek,timeGridDay'
- },
- editable: true,
- dateClick: (e) => {
- //handle date click
- }
- }
- };
- }
-}
-
-| Name | -Type | -Default | -Description | -
|---|---|---|---|
| events | -array | -null | -An array of events to display. | -
| options | -object | -null | -A configuration object to define properties of FullCalendar. | -
As it is not a component from PrimeVue, refer to the FullCalendar documentation for more information.