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-event
-    v-bind:calendarEvents="calendarEvents">
-  </calendar-event>
+  </calendar-user-selector>
+  <h2 class="chill-red">{{ $t('choose_your_date') }}</h2>
+  <FullCalendar ref="fullCalendar" :options="calendarOptions">
+    <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: []
-      }
-    }
-  },
-  methods: {
-    updateEventsSource() {
-      console.log('updateEventsSource')
- 
-      //TODO: how to update source events??? use https://fullcalendar.io/docs/Calendar-addEventSource?
-      
-
-      //TODO
-      // fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
-      //     let calendarEvents = [];
-      //     calendarRanges.results.forEach(i => {
-      //       calendarEvents.push({
-
-      //       })
-      //     });
-      //     this.calendarEvents = calendarEvents;
-      //     resolve()
-      // }))
-      // .catch((error) => {
-      //   this.errorMsg.push(error.message);
-      // });
-      // this.calendarEvents = [
-      //    {
-      //      events: [
+      },
+      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: [{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() {
-//     this.init();
-//   }
+  methods: {
+    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>