Update documentation on full calendar
Cagatay Civici
parent
5f80e8cf9c
commit
003aec4247
|
|
@ -3,9 +3,8 @@
|
|||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>FullCalendar</h1>
|
||||
<p><a href="https://fullcalendar.io/docs/vue">FullCalendar Vue</a> library is fully compatible with PrimeVue themes.</p>
|
||||
<p>PrimeVue provides theming for the <a href="https://fullcalendar.io/docs/vue">FullCalendar</a> Vue component.</p>
|
||||
</div>
|
||||
<AppDemoActions />
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
|
|
|
|||
|
|
@ -1,215 +1,8 @@
|
|||
<template>
|
||||
<AppDoc name="FullCalendarDemo" :sources="sources" :service="['EventService']" :data="['events']" github="fullcalendar/FullCalendarDemo.vue"
|
||||
:dependencies="{'@fullcalendar/core': '^5.7.2', '@fullcalendar/vue3': '^5.7.2', '@fullcalendar/daygrid': '^5.7.2', '@fullcalendar/interaction': '^5.7.2', '@fullcalendar/timegrid': '^5.7.2'}" component="FullCalendar">
|
||||
<h4><strong>Note:</strong> This documentation explains how to use PrimeVue's FullCalendar component and <a href="https://fullcalendar.io/docs/v4">FullCalendar 4.0.1+</a>.
|
||||
In PrimeVue 5.7.2+, FullCalendar component is deprecated. Now, PrimeVue provides full theming support to the <a href="https://fullcalendar.io/docs/vue">FullCalendar Vue</a> library.
|
||||
In this way, it is aimed to use it compatible with other PrimeVue components.</h4>
|
||||
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import FullCalendar from 'primevue/fullcalendar';
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Getting Started</h5>
|
||||
<p>FullCalendar is a wrapper around on <a href="https://fullcalendar.io/docs/v4">FullCalendar 5.4.0+</a> so fullcalendar needs to be included in your project.
|
||||
For a complete documentation and samples please refer to the <a href="https://fullcalendar.io/">fullcalendar website</a>.</p>
|
||||
<pre v-code><code>
|
||||
npm install @fullcalendar/core --save
|
||||
|
||||
</code></pre>
|
||||
|
||||
<p>FullCalendar is plugin based so install the plugins you require and define them with the options property.</p>
|
||||
<pre v-code><code>
|
||||
npm install @fullcalendar/daygrid --save
|
||||
npm install @fullcalendar/timegrid --save
|
||||
npm install @fullcalendar/interaction --save
|
||||
|
||||
</code></pre>
|
||||
|
||||
<p>Events should be an array and defined using the events property.</p>
|
||||
<pre v-code><code>
|
||||
<FullCalendar :events="events" />
|
||||
|
||||
</code></pre>
|
||||
|
||||
<pre v-code.script><code>
|
||||
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"
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
</code></pre>
|
||||
|
||||
<p>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.</p>
|
||||
<pre v-code.script><code>
|
||||
import axios from 'axios';
|
||||
|
||||
export default class EventService {
|
||||
|
||||
getEvents() {
|
||||
return axios.get('demo/data/events.json').then(res => res.data.data);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</code></pre>
|
||||
|
||||
<pre v-code.script><code>
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Options</h5>
|
||||
<p>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.</p>
|
||||
<pre v-code><code>
|
||||
<FullCalendar :events="events" :options="options" />
|
||||
|
||||
</code></pre>
|
||||
|
||||
<pre v-code.script><code>
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Callbacks</h5>
|
||||
<p>Callbacks of the FullCalendar such as dateClick are also defined with the options property.</p>
|
||||
<pre v-code.script><code>
|
||||
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
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Properties</h5>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>events</td>
|
||||
<td>array</td>
|
||||
<td>null</td>
|
||||
<td>An array of events to display.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>options</td>
|
||||
<td>object</td>
|
||||
<td>null</td>
|
||||
<td>A configuration object to define properties of FullCalendar.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h5>Dependencies</h5>
|
||||
<p><a href="https://fullcalendar.io/docs/v4">FullCalendar 4.0.0+</a></p>
|
||||
<p>As it is not a component from PrimeVue, refer to the FullCalendar <a href="https://fullcalendar.io/docs/vue">documentation</a> for more information.</p>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -134,16 +134,12 @@ dependencies: {
|
|||
<tbody>
|
||||
<tr>
|
||||
<td>Charts</td>
|
||||
<td>Charts.js 2.1.x+</td>
|
||||
<td>Charts.js 3.3.2+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Editor</td>
|
||||
<td>Quill.js 1.3.3+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>FullCalendar</td>
|
||||
<td>FullCalendar 5.4.0+.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PrimeFlex</td>
|
||||
<td>DataView</td>
|
||||
|
|
|
|||
Loading…
Reference in New Issue