rdv: set the calendar ranges as an API point + fetch them into the calendar view

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/CalendarEvent.vue

@@ -12,6 +12,7 @@ import FullCalendar from '@fullcalendar/vue3'
 import dayGridPlugin from '@fullcalendar/daygrid'
 import interactionPlugin from '@fullcalendar/interaction'
 import timeGridPlugin from '@fullcalendar/timegrid'
+import { fetchCalendarRanges } from './js/api'
 
 export default {
   components: {
@@ -19,6 +20,7 @@ export default {
   },
   data() {
     return {
+      calendarRanges: [],
       calendarOptions: {
         plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
         initialView: 'timeGridWeek',
@@ -31,6 +33,11 @@ export default {
             }
           ] : [],
         initialDate: window.startDate !== undefined ? window.startDate : new Date(),
+        //events: this.displayEvents(),
+        eventSources: [
+          this.displayEventSource1(),
+          this.displayEventSource2(),
+        ],
         selectable: true,
         select: this.onDateSelect,
         eventChange: this.onEventChange,
@@ -41,10 +48,88 @@ export default {
           center: 'title',
           right: 'dayGridMonth,timeGridWeek,timeGridDay'
         },
-      }
+      },
+      errorMsg: {},
     }
   },
   methods: {
+    getCalendarRanges() {
+      console.log('get Calendar Ranges');
+      fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
+          this.calendarRanges = calendarRanges.results;
+          this.calendarRanges = [
+            {
+              title  : 'event1',
+              start  : '2021-07-01'
+            },
+            {
+              title  : 'event2',
+              start  : '2021-07-05',
+              end    : '2021-07-07'
+            },
+            {
+              title  : 'event3',
+              start  : '2021-07-09T12:30:00',
+              allDay : false // will make the time show
+            }
+          ];
+          resolve()
+      }))
+      .catch((error) => {
+          this.errorMsg.push(error.message);
+      });
+    },
+    displayEvents() { //TODO WIP
+      return [
+            {
+              title  : 'event1',
+              start  : '2021-07-04T10:30:00'
+            },
+            {
+              title  : 'event2',
+              start  : '2021-07-05',
+              end    : '2021-07-07'
+            },
+            {
+              title  : 'event3',
+              start  : '2021-07-09T12:30:00',
+              allDay : false // will make the time show
+            }
+      ]
+      //return this.calendarRanges // undefined as not fetched when evaluated
+    },
+    displayEventSource1(){ // TODO replace this with the fetch function depending on the User calendar ranges
+      return {
+        events: [
+          {
+            title: 'Event1',
+            start: '2021-07-04T12:30:00'
+          },
+          {
+            title: 'Event2',
+            start: '2021-07-05T12:30:00'
+          }
+        ],
+        color: 'yellow',   // an option!
+        textColor: 'black' // an option!
+      }
+    },
+    displayEventSource2(){
+      return {
+        events: [
+          {
+            title: 'Event1',
+            start: '2021-08-04T12:30:00'
+          },
+          {
+            title: 'Event2',
+            start: '2021-08-05T12:30:00'
+          }
+        ],
+        color: 'green',   // an option!
+        textColor: 'red' // an option!
+      }
+    },
     onDateSelect(payload) {
       this.$store.dispatch('createEvent', payload);
     },
@@ -52,10 +137,8 @@ export default {
       this.$store.dispatch('updateEvent', payload);
     }
   },
-  // mounted() {
-  //   console.log(window.startDate);
-  //   console.log(window.endDate);
-  //   console.log(window.date);
-  // }
+  mounted() {
+    this.getCalendarRanges()
+  }
 }
 </script>

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/js/api.js

@@ -0,0 +1,17 @@
+/*
+* Endpoint chill_api_single_country__index
+* method GET, get Country Object
+* @returns {Promise} a promise containing all Country object
+*/
+const fetchCalendarRanges = () => {
+   const url = `/api/1.0/calendar/calendar-range.json?item_per_page=1000`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response');
+      });
+};
+
+export {
+   fetchCalendarRanges
+};