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

FullCalendar doc added

pull/12/head
Merve Özçifçi 2019-03-28 15:39:32 +03:00
parent 3a652b8e79
commit 1cc036b10e
2 changed files with 227 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,11 +10,14 @@
<div class="content-section implementation">
<FullCalendar :events="events" :options="options" />
</div>
<FullCalendarDoc/>
</div>
</template>
<script>
import EventService from '../../service/EventService';
import FullCalendarDoc from './FullCalendarDoc';
export default {
data() {
@ -37,6 +40,9 @@ export default {
},
mounted() {
this.eventService.getEvents().then(data => this.events = data);
},
components: {
'FullCalendarDoc': FullCalendarDoc
}
}
</script>

221
src/views/fullcalendar/FullCalendarDoc.vue Normal file
View File

@ -0,0 +1,221 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<CodeHighlight lang="javascript">
import FullCalendar from 'primevue/fullcalendar';
</CodeHighlight>
<h3>Getting Started</h3>
<p>FullCalendar is a wrapper around on <a href="https://fullcalendar.io/docs/v4">FullCalendar 4.0.0.alpha.2+</a> so fullcalendar needs to be included in your project. For a complete documentation and samples please refer to the fullcalendar website.</p>
<CodeHighlight>
npm install fullcalendar@4.0.0-alpha.2 --save
</CodeHighlight>
<p>Events should be an array and defined using the events property.</p>
<CodeHighlight>
&lt;FullCalendar :events=&quot;events&quot; /&gt;
</CodeHighlight>
<CodeHighlight lang="js">
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"
}
]
};
}
}
</CodeHighlight>
<p>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.</p>
<CodeHighlight lang="js">
import axios from 'axios';
export default class EventService {
getEvents() {
return axios.get('demo/data/events.json').then(res => res.data.data);
}
}
</CodeHighlight>
<CodeHighlight lang="js">
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);
}
}
</CodeHighlight>
<h3>Options</h3>
<p>FullCalendar has a long list of customization parameters that are defined with the options property. Example below customizes the header property.</p>
<CodeHighlight lang="js">
export default {
data() {
return {
options: {
defaultDate: '2019-01-01',
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true
}
};
},
}
</CodeHighlight>
<h3>Callbacks</h3>
<p>Callbacks of the FullCalendar such as dateClick are also defined with the options property.</p>
<CodeHighlight lang="js">
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
}
}
};
},
}
</CodeHighlight>
<h3>Properties</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>events</td>
<td>array</td>
<td>An array of events to display.</td>
</tr>
<tr>
<td>options</td>
<td>Object</td>
<td>A configuration object to define properties of FullCalendar.</td>
</tr>
</tbody>
</table>
</div>
<h3>Dependencies</h3>
<a href="https://fullcalendar.io/docs/v4">FullCalendar 4.0.0.alpha.2+</a>
</TabPanel>
<TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/fullcalendar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<CodeHighlight>
<template v-pre>
&lt;template&gt;
&lt;div&gt;
&lt;div class=&quot;content-section introduction&quot;&gt;
&lt;div class=&quot;feature-intro&quot;&gt;
&lt;h1&gt;FullCalendar&lt;/h1&gt;
&lt;p&gt;An event calendar based on the &lt;a href=&quot;https://fullcalendar.io/&quot;&gt;FullCalendar&lt;/a&gt; library.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;content-section implementation&quot;&gt;
&lt;FullCalendar :events=&quot;events&quot; :options=&quot;options&quot; /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import EventService from '../../service/EventService';
export default {
data() {
return {
options: {
defaultDate: '2019-01-01',
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true
},
events: null
};
},
eventService: null,
created() {
this.eventService = new EventService();
},
mounted() {
this.eventService.getEvents().then(data => this.events = data);
}
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</template>