rdv: fullcalendar: update events source dynamically

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue

@@ -4,24 +4,30 @@
     v-bind:users="users"
     v-bind:calendarEvents="calendarEvents" 
     v-bind:updateEventsSource="updateEventsSource">
-   </calendar-user-selector>
+  </calendar-user-selector>
-  <calendar-event
+  <h2 class="chill-red">{{ $t('choose_your_date') }}</h2>
-    v-bind:calendarEvents="calendarEvents">
+  <FullCalendar ref="fullCalendar" :options="calendarOptions">
-  </calendar-event>
+    <template v-slot:eventContent='arg'>
+      <b>{{ arg.timeText }}</b>
+    </template>
+  </FullCalendar>
 </template>
 
 <script>
 import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue';
-import CalendarEvent from '../_components/CalendarEvent/CalendarEvent.vue';
 import CalendarUserSelector from '../_components/CalendarUserSelector/CalendarUserSelector.vue';
-import { fetchCalendarRanges } from '../_components/CalendarEvent/js/api';
+import '@fullcalendar/core/vdom' // solves problem with Vite
+import FullCalendar from '@fullcalendar/vue3'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import timeGridPlugin from '@fullcalendar/timegrid'
 
 export default {
   name: "App",
   components: {
     ConcernedGroups,
-    CalendarEvent,
     CalendarUserSelector,
+    FullCalendar
   },
   data() {
     return {
@@ -33,33 +39,20 @@ export default {
       calendarEvents: {
          loaded: [],
          selected: []
-      }
+      },
-    }
+      calendarOptions: {
-  },
+        plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
-  methods: {
+        initialView: 'timeGridWeek',
-    updateEventsSource() {
+        initialEvents: window.startDate !== undefined ?
-      console.log('updateEventsSource')
+          [
- 
+            {
-      //TODO: how to update source events??? use https://fullcalendar.io/docs/Calendar-addEventSource?
+              id: 1,
-      
+              start: window.startDate,
-
+              end: window.endDate
-      //TODO
+            }
-      // fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
+          ] : [],
-      //     let calendarEvents = [];
+        initialDate: window.startDate !== undefined ? window.startDate : new Date(),
-      //     calendarRanges.results.forEach(i => {
+      //   eventSources: [{events: [
-      //       calendarEvents.push({
-
-      //       })
-      //     });
-      //     this.calendarEvents = calendarEvents;
-      //     resolve()
-      // }))
-      // .catch((error) => {
-      //   this.errorMsg.push(error.message);
-      // });
-      // this.calendarEvents = [
-      //    {
-      //      events: [
       //        {
       //          title: 'Event1',
       //          start: '2021-08-04T12:30:00'
@@ -71,12 +64,53 @@ export default {
       //      ],
       //      color: 'yellow',   // an option!
       //      textColor: 'black' // an option!
-      //    }
+      //     }],//this work at initialisation, initialize with initialEvents content?
-      // ]
+        selectable: true,
+        select: this.onDateSelect,
+        eventChange: this.onEventChange,
+        selectMirror: true,
+        editable: true,
+        lazyFetching: false, // To fetch at maximum
+        headerToolbar: {
+          left: 'prev,next today',
+          center: 'title',
+          right: 'dayGridMonth,timeGridWeek,timeGridDay'
+        },
+      }
     }
   },
-//   mounted() {
+  methods: {
-//     this.init();
+    init() {
-//   }
+      console.log(window.startDate)
+      let calendar = this.$refs.fullCalendar.getApi()
+      //calendar.next()
+      console.log(calendar)
+    },
+    updateEventsSource() {
+      console.log('updateEventsSource')
+ 
+      console.log(this.calendarEvents.loaded);
+      this.calendarEvents.selected = this.calendarEvents.loaded; //TODO filter loaded events on selected users
+     
+      // this works!!!
+      this.calendarOptions.eventSources = this.calendarEvents.selected;
+
+      // let calendar = this.$refs.fullCalendar.getApi();
+      // console.log(calendar);
+      // console.log(calendar.getEventSources())
+      // calendar.addEventSource(this.calendarEvents.selected);
+
+      // console.log(calendar.getEventSources())
+    },
+    onDateSelect(payload) {
+      this.$store.dispatch('createEvent', payload);
+    },
+    onEventChange(payload) {
+      this.$store.dispatch('updateEvent', payload);
+    }
+  },
+  mounted() {
+    this.init();
+  }
 }
 </script>

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

@@ -1,163 +0,0 @@
-<template>
-  <h2 class="chill-red">{{ $t('choose_your_date') }}</h2>
-  <FullCalendar :options="calendarOptions">
-      <template v-slot:eventContent='arg'>
-          <b>{{ arg.timeText }}</b>
-      </template>
-  </FullCalendar>
-</template>
-<script>
-import '@fullcalendar/core/vdom' // solves problem with Vite
-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: {
-    FullCalendar
-  },
-  props: ['calendarEvents'],
-  data() {
-    return {
-      //calendarRanges: [],
-      calendarOptions: {
-        plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
-        initialView: 'timeGridWeek',
-        // initialEvents: window.startDate !== undefined ?
-        //   [
-        //     {
-        //       id: 1,
-        //       start: window.startDate,
-        //       end: window.endDate
-        //     }
-        //   ] : [],
-        initialDate: window.startDate !== undefined ? window.startDate : new Date(),
-        eventSources: this.calendarEvents,
-        selectable: true,
-        select: this.onDateSelect,
-        eventChange: this.onEventChange,
-        selectMirror: true,
-        editable: true,
-        lazyFetching: false, // To fetch at maximum
-        headerToolbar: {
-          left: 'prev,next today',
-          center: 'title',
-          right: 'dayGridMonth,timeGridWeek,timeGridDay'
-        },
-      },
-      errorMsg: [],
-    }
-  },
-  methods: {
-    init() {
-      this.getCalendarRanges()
-      console.log(window.startDate)
-    },
-    getCalendarRanges() {
-      // console.log('getCalendarRanges')
-      // fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
-      //   // let calendarEvents = [];
-
-      //   // this.users.loaded.forEach(u => {
-      //   //   let arr = calendarRanges.results.filter(i => i.user.id = u.id);
-      //   //   console.log(arr)
-      //   //   calendarEvents.push({
-      //   //     events: arr,
-      //   //     color: u.color
-      //   //   })
-      //   // })
-  
-      //     // this.calendarEvents = [
-      // //    {
-      // //      events: [
-      // //        {
-      // //          title: 'Event1',
-      // //          start: '2021-08-04T12:30:00'
-      // //        },
-      // //        {
-      // //          title: 'Event2',
-      // //          start: '2021-08-05T12:30:00'
-      // //        }
-      // //      ],
-      // //      color: 'yellow',   // an option!
-      // //      textColor: 'black' // an option!
-      // //    }
-      // // ]
-      //   // console.log(calendarEvents)
-      //   // this.calendarEvents = calendarEvents;
-      //   resolve()
-      // }))
-      // .catch((error) => {
-      //   this.errorMsg.push(error.message);
-      // });
-    },
-
-    // getCalendarRanges(userId) {
-    //   console.log('get Calendar Ranges');
-    //   return fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
-    //       console.log(calendarRanges);
-    //       this.calendarRanges = calendarRanges.results;
-    //       let source = { //TODO transform the results above into a object as following
-    //         events: [
-    //           {
-    //             title: 'Event1',
-    //             start: '2021-07-04T09:30:00'
-    //           },
-    //           {
-    //             title: 'Event2',
-    //             start: '2021-07-05T09:30:00'
-    //           }
-    //         ],
-    //         color: 'red',   // an option!
-    //         textColor: 'white' // an option!
-    //       };
-    //       this.calendarRanges = source;
-    //       resolve()
-    //   }))
-    //   .catch((error) => {
-    //       this.errorMsg.push(error.message);
-    //   });
-    // },
-    // getEventsSources() { // soit on appelle cette function plus tard, soit on gère différement l'asynchroniété
-    //   let arr = [
-    //     this.displayEventSource1(),   
-    //     fetchCalendarRanges().then(response => {
-    //       console.log(response)
-    //       return response
-    //       // if (response.ok) { return response.results }
-    //     })
-    //     //this.calendarRanges
-    //   ];
-    //   console.log(arr);
-    //   return arr;
-    // },
-    // 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!
-    //   }
-    // },
-    onDateSelect(payload) {
-      this.$store.dispatch('createEvent', payload);
-    },
-    onEventChange(payload) {
-      this.$store.dispatch('updateEvent', payload);
-    }
-  },
-  mounted() {
-    this.init()
-  }
-}
-</script>

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

@@ -1,17 +0,0 @@
-/*
-* Endpoint chill_api_single_calendar_range
-* method GET, get Calendar ranges
-* @returns {Promise} a promise containing all Calendar ranges objects
-*/
-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
-};

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

@@ -1,10 +0,0 @@
-const calendarEventMessages = {
-    fr: {
-        choose_your_date: 'Sélectionnez vos dates',
-    }
- };
- 
- export {
-    calendarEventMessages
- };
-