lib/vue/components/calendar.vue in lesli_calendar-0.2.1 vs lib/vue/components/calendar.vue in lesli_calendar-0.2.2

@@ -30,11 +30,11 @@
 // · 
 */
 
 
 // · Import components, libraries and tools
-import { onMounted, inject, ref } from "vue"
+import { onMounted, watch, inject, ref } from "vue"
 
 import { Calendar } from "@fullcalendar/core";
 import listPlugin from "@fullcalendar/list";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
@@ -49,10 +49,11 @@
 const storeCalendar = useCalendar()
 
 
 // · 
 const date = inject("date")
+const calendar = ref(false)
 
 
 function onDateClick() {
     // const storeEvent = useEvent()
     // this.reset()
@@ -102,14 +103,41 @@
     time.classList.add("event-time")
     return { domNodes: [title, time] }
 
 }
 
+
+function loadEvents() {
+
+    // Add calendar events 
+    storeCalendar.calendar.events.forEach(event => {
+        calendar.value.addEvent({
+            title: event.title,
+            start: event.date,
+            description: event.description,
+            classNames: event.classNames
+        })
+    })
+
+    // Add calendar events 
+    storeCalendar.calendar.events_support.forEach(event => {
+        calendar.value.addEvent({
+            title: event.title,
+            start: event.date,
+            description: event.description,
+            classNames: event.classNames
+        })
+    })
+
+}
+
+
+
 // · 
 onMounted(() => {
 
-    storeCalendar.calendar = new Calendar(document.getElementById("lesli-calendar"), {
+    calendar.value = new Calendar(document.getElementById("lesli-calendar"), {
         plugins: [
             dayGridPlugin,
             interactionPlugin,
             timeGridPlugin,
             listPlugin
@@ -124,12 +152,19 @@
         eventClick: onEventClick,
         dateClick: onDateClick,
         //eventContent: onEventContent
     });
 
-    setTimeout(() => { storeCalendar.calendar.render(); }, 200)
+    loadEvents()
 
+    setTimeout(() => { calendar.value.render(); }, 200)
 })
+
+
+// · 
+watch(() => storeCalendar.calendar.id, (a,b) => {
+    loadEvents()
+})
 </script>
 <template>
-    <div id="lesli-calendar"></div>
+    <div id="lesli-calendar" class="box"></div>
 </template>