+ Import
+
+import FullCalendar from 'primevue/fullcalendar';
+
+
+ Getting Started
+ FullCalendar is a wrapper around on FullCalendar 4.0.0.alpha.2+ so fullcalendar needs to be included in your project. For a complete documentation and samples please refer to the fullcalendar website.
+
+npm install fullcalendar@4.0.0-alpha.2 --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 service 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 are defined with the options property. Example below customizes the header property.
+
+export default {
+ data() {
+ return {
+ options: {
+ defaultDate: '2019-01-01',
+ header: {
+ left: 'prev,next',
+ center: 'title',
+ right: 'month,agendaWeek,agendaDay'
+ },
+ editable: true
+ }
+ };
+ },
+}
+
+
+ Callbacks
+ Callbacks of the FullCalendar such as dateClick are also defined with the options property.
+
+export default {
+ data() {
+ return {
+ options: {
+ defaultDate: '2019-01-01',
+ header: {
+ left: 'prev,next',
+ center: 'title',
+ right: 'month,agendaWeek,agendaDay'
+ },
+ editable: true,
+ dateClick: (e) => {
+ //handle date click
+ }
+ }
+ };
+ },
+}
+
+
+ Properties
+
+
+
+
+ | Name |
+ Type |
+ Description |
+
+
+
+
+ | events |
+ array |
+ An array of events to display. |
+
+
+ | options |
+ Object |
+ A configuration object to define properties of FullCalendar. |
+
+
+
+
Dependencies
+ FullCalendar 4.0.0.alpha.2+
+
+
+