vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update documentation on full calendar

pull/1383/head
Cagatay Civici 2021-07-26 11:08:38 +03:00
parent 5f80e8cf9c
commit 003aec4247
3 changed files with 3 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/fullcalendar/FullCalendarDemo.vue
View File

@ -3,9 +3,8 @@
<div class="content-section introduction"> <div class="content-section introduction">
<div class="feature-intro"> <div class="feature-intro">
<h1>FullCalendar</h1> <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> </div>
<AppDemoActions />
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">

209
src/views/fullcalendar/FullCalendarDoc.vue
View File

@ -1,215 +1,8 @@
<template> <template>
<AppDoc name="FullCalendarDemo" :sources="sources" :service="['EventService']" :data="['events']" github="fullcalendar/FullCalendarDemo.vue" <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"> :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> <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>
<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>
&lt;FullCalendar :events="events" /&gt;
</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>
&lt;FullCalendar :events="events" :options="options" /&gt;
</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>
</AppDoc> </AppDoc>
</template> </template>

6
src/views/setup/Setup.vue
View File

@ -134,16 +134,12 @@ dependencies: {
<tbody> <tbody>
<tr> <tr>
<td>Charts</td> <td>Charts</td>
<td>Charts.js 2.1.x+</td> <td>Charts.js 3.3.2+</td>
</tr> </tr>
<tr> <tr>
<td>Editor</td> <td>Editor</td>
<td>Quill.js 1.3.3+</td> <td>Quill.js 1.3.3+</td>
</tr> </tr>
<tr>
<td>FullCalendar</td>
<td>FullCalendar 5.4.0+.</td>
</tr>
<tr> <tr>
<td>PrimeFlex</td> <td>PrimeFlex</td>
<td>DataView</td> <td>DataView</td>