Initiated FullCalendar

package.json

@@ -30,6 +30,8 @@
     "vue-template-compiler": "^2.5.17",
     "primeicons": "1.0.0",
     "primeflex": "1.0.0-rc.1",
-    "quill": "1.3.3"
+    "quill": "1.3.3",
+    "axios": "^0.15.3",
+    "fullcalendar": "4.0.0-alpha.2"
   }
 }

public/demo/data/events.json

@@ -0,0 +1,68 @@
+{
+    "data": [
+    	{
+            "id": 1,
+    		"title": "All Day Event",
+    		"start": "2017-02-01"
+    	},
+    	{
+            "id": 2,
+    		"title": "Long Event",
+    		"start": "2017-02-07",
+    		"end": "2017-02-10"
+    	},
+    	{
+    		"id": 3,
+    		"title": "Repeating Event",
+    		"start": "2017-02-09T16:00:00"
+    	},
+    	{
+    		"id": 4,
+    		"title": "Repeating Event",
+    		"start": "2017-02-16T16:00:00"
+    	},
+    	{
+            "id": 5,
+    		"title": "Conference",
+    		"start": "2017-02-11",
+    		"end": "2017-02-13"
+    	},
+    	{
+            "id": 6,
+    		"title": "Meeting",
+    		"start": "2017-02-12T10:30:00",
+    		"end": "2017-02-12T12:30:00"
+    	},
+    	{
+            "id": 7,
+    		"title": "Lunch",
+    		"start": "2017-02-12T12:00:00"
+    	},
+    	{
+            "id": 8,
+    		"title": "Meeting",
+    		"start": "2017-02-12T14:30:00"
+    	},
+    	{
+            "id": 9,
+    		"title": "Happy Hour",
+    		"start": "2017-02-12T17:30:00"
+    	},
+    	{
+            "id": 10,
+    		"title": "Dinner",
+    		"start": "2017-02-12T20:00:00"
+    	},
+    	{
+            "id": 11,
+    		"title": "Birthday Party",
+    		"start": "2017-02-13T07:00:00"
+    	},
+    	{
+            "id": 12,
+    		"title": "Click for Google",
+    		"url": "http://google.com/",
+    		"start": "2017-02-28"
+    	}
+    ]
+}

src/AppMenu.vue

@@ -46,7 +46,7 @@
             </a>
             <div :class="{'submenuhide': activeMenuIndex !== 2, 'submenushow': activeMenuIndex === 2}">
                 <div>
-                    <router-link to="/">&#9679; Link</router-link>
+                    <router-link to="/fullcalendar">&#9679; FullCalendar</router-link>
                 </div>
             </div>
 

src/components/fullcalendar/FullCalendar.vue

@@ -0,0 +1,54 @@
+<template>
+    <div ref="container"></div>
+</template>
+
+<script>
+import {Calendar} from 'fullcalendar';
+
+export default {
+    props: {
+        events: Array,
+        options: null
+    },
+    calendar: null,
+    watch: {
+        events(newValue) {
+            this.calendar.removeAllEventSources();
+            this.calendar.addEventSource(newValue);
+        }
+    },
+    mounted() {
+        if (this.$refs.container.offsetParent) {
+            this.initialize();
+        }
+    },
+    updated() {
+        if (!this.calendar && this.$refs.container.offsetParent) {
+            this.initialize();
+        }
+    },
+    beforeDestroy() {
+        if (this.calendar) {
+            this.calendar.destroy();
+            this.calendar = null;
+        }
+    },
+    methods: {
+        initialize() {
+            let defaultConfig = {theme: true};
+            let config = this.options ? {...this.options, ...defaultConfig} : defaultConfig;
+            this.calendar = new Calendar(this.$refs.container, config);
+            this.calendar.render();
+
+            if (this.events) {
+                this.calendar.removeAllEventSources();
+                this.calendar.addEventSource(this.events);
+            }
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

src/main.js

@@ -9,6 +9,7 @@ import Checkbox from './components/checkbox/Checkbox';
 import Chips from './components/chips/Chips';
 import Dropdown from './components/dropdown/Dropdown';
 import Editor from './components/editor/Editor';
+import FullCalendar from './components/fullcalendar/FullCalendar';
 import InputSwitch from './components/inputswitch/InputSwitch';
 import InputText from './components/inputtext/InputText';
 import Fieldset from './components/fieldset/Fieldset';
@@ -43,6 +44,7 @@ Vue.component('p-checkbox', Checkbox);
 Vue.component('p-chips', Chips);
 Vue.component('p-dropdown', Dropdown);
 Vue.component('p-editor', Editor);
+Vue.component('p-fullCalendar', FullCalendar);
 Vue.component('p-inputSwitch', InputSwitch);
 Vue.component('p-inputtext', InputText);
 Vue.component('p-listbox', Listbox);

src/router.js

@@ -56,6 +56,11 @@ export default new Router({
         name: 'flexgrid',
         component: () => import('./views/flexgrid/FlexGridDemo.vue')
     },
+    {
+        path: '/fullcalendar',
+        name: 'fullcalendar',
+        component: () => import('./views/fullcalendar/FullCalendarDemo.vue')
+    },
     {
         path: '/inputswitch',
         name: 'inputswitch',

src/service/EventService.js

@@ -0,0 +1,8 @@
+import axios from 'axios';
+
+export default class EventService {
+    
+    getEvents() {
+        return axios.get('demo/data/events.json').then(res => res.data.data);
+    }
+}

src/views/fullcalendar/FullCalendarDemo.vue

@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>FullCalendar</h1>
+                <p>An event calendar based on the <a href="https://fullcalendar.io/">FullCalendar</a> library.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <p-fullCalendar :events="events" />
+        </div>
+    </div>
+</template>
+
+<script>
+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);
+    }
+}
+</script>