rdv: fullcalendar vue: use store and add an event on date select

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store.js

@@ -29,6 +29,7 @@ const store = createStore({
    strict: debug,
    state: {
      activity: mapEntity(window.entity),
+     events: []
    },
    mutations: {
       
@@ -60,6 +61,11 @@ const store = createStore({
                state.activity.users = state.activity.users.filter(user => user !== payload); 
                break;
          };
+      },
+      // Calendar
+      onDateSelect(state, payload) {
+         console.log(payload)
+         state.events.push( {start: payload.start, end: payload.end})
       }
    },
    actions: {
@@ -98,6 +104,12 @@ const store = createStore({
                break;
          };
          commit('removePersonInvolved', payload);
+      },
+
+      // Calendar
+      onDateSelect({ commit }, payload) {
+         console.log('### action onDateSelect', payload);
+         commit('onDateSelect', payload);
       }
   }
 });

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

@@ -1,4 +1,5 @@
 <template>
+  <h2 class="chill-red">{{ $t('choose_your_date') }}</h2>
   <FullCalendar :options="calendarOptions" />
 </template>
 <script>
@@ -9,15 +10,22 @@ import interactionPlugin from '@fullcalendar/interaction'
 
 export default {
   components: {
-    FullCalendar // make the <FullCalendar> tag available
+    FullCalendar
   },
   data() {
     return {
       calendarOptions: {
         plugins: [ dayGridPlugin, interactionPlugin ],
-        initialView: 'dayGridMonth'
+        initialView: 'dayGridMonth',
+        selectable: true,
+        select: this.onDateSelect
       }
     }
+  },
+  methods: {
+    onDateSelect(payload) {
+      this.$store.dispatch('onDateSelect', payload);
+    }
   }
 }
 </script>