first reactive calendar

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue

@@ -1,12 +1,13 @@
 <template>
-  <p>Il y a {{eventSources[0].events.length}} événements</p>
+  <p>Il y a {{ranges.length}} plages</p>
   <FullCalendar :options="calendarOptions"></FullCalendar>
 </template>
 
 <script setup lang="ts">
 
-//import {CalendarOptions, DatesSetArg, EventSourceInput} from '@fullcalendar/vue3';
+import type {CalendarOptions, DatesSetArg, EventSourceInput, EventInput} from '@fullcalendar/vue3';
 import {reactive, computed, ref} from "vue";
+import type {DebuggerEvent} from "vue";
 import {mapGetters, useStore} from "vuex";
 import {key} from './store';
 import '@fullcalendar/core/vdom'; // solves problem with Vite
@@ -17,35 +18,66 @@ import timeGridPlugin from "@fullcalendar/timegrid";
 
 const store = useStore(key);
 
-const eventSources = computed<[]>(() => {
+const baseOptions = reactive<CalendarOptions>({
-  console.log('event sources');
+  locale: frLocale,
-  return store.getters.getEventSources;
+  plugins: [interactionPlugin, timeGridPlugin],
+  initialView: 'timeGridWeek',
+  initialDate: new Date(),
+  selectable: true,
+  datesSet: onDatesSet,
+  eventSources: [],
+  selectMirror: false,
+  editable: true,
+  slotDuration: '00:15:00',
+  slotMinTime: "08:00:00",
+  slotMaxTime: "19:00:00",
+  headerToolbar: {
+    left: 'prev,next today',
+    center: 'title',
+    right: 'timeGridWeek timeGridDay'
+  },
 });
 
-const calendarOptions = computed(() => {
+const ranges = computed<EventInput[]>(() => {
-      return {
+  return store.state.calendarRanges.ranges;
-        locale: frLocale,
+});
-        plugins: [interactionPlugin, timeGridPlugin],
-        initialView: 'timeGridWeek',
-        initialDate: new Date(),
-        selectable: true,
-        datesSet: onDatesSet,
-        eventSources: eventSources.value,
-        selectMirror: false,
-        editable: true,
-        slotDuration: '00:15:00',
-        slotMinTime: "08:00:00",
-        slotMaxTime: "19:00:00",
-        headerToolbar: {
-          left: 'prev,next today',
-          center: 'title',
-          right: 'timeGridWeek timeGridDay'
-        },
-      };
-    });
 
-function onDatesSet(event: any) {
+const sources = computed<EventSourceInput[]>(() => {
-  console.log('onDatesSet', event);
+  const sources = [];
+
+  const dummy: EventSourceInput = {
+    id: 'dummy',
+    events: [
+      { id: '-1', start: '2022-06-23T12:00:00+02:00', end: '2022-06-23T14:00:00+02:00'},
+      { id: '-2', start: '2022-06-24T12:00:00+02:00', end: '2022-06-24T14:00:00+02:00'},
+    ]
+  }
+
+  sources.push(dummy);
+
+  const rangeSource: EventSourceInput = {
+    id: 'ranges',
+    events: ranges.value,
+  };
+
+  sources.push(rangeSource);
+
+  return sources;
+});
+
+const calendarOptions = computed((): CalendarOptions => {
+  const o = {
+    ...baseOptions,
+    events: ranges.value,
+    eventSources: sources.value,
+  };
+
+  console.log('calendarOptions', o);
+
+  return o;
+});
+
+function onDatesSet(event: DatesSetArg) {
   store.dispatch('fullCalendar/setCurrentDatesView', {start: event.start, end: event.end})
     .then(source => {
       console.log('onDatesSet finished');

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.ts

@@ -6,7 +6,7 @@ import {InjectionKey} from "vue";
 //import mutations from './mutations';
 import me, {MeState} from './modules/me';
 import fullCalendar, {FullCalendarState} from './modules/fullcalendar';
-import calendarRanges, {CalendarRangesState, RangeSource} from './modules/calendarRanges';
+import calendarRanges, {CalendarRangesState} from './modules/calendarRanges';
 import {whoami} from 'ChillCalendarAssets/vuejs/Calendar/api';
 import {User} from 'ChillMainAssets/types';
 
@@ -41,16 +41,6 @@ const futureStore = function(): Promise<Store<State>> {
         fullCalendar,
         calendarRanges,
       },
-      getters: {
-        getEventSources(state, getters, rootState): RangeSource[] {
-          let s = [];
-          s.push(rootState.calendarRanges.rangeSource);
-
-          console.log('getEventSources', s);
-
-          return s;
-        },
-      },
       mutations: {
         increaseKey(state: State) {
           //state.key = state.key + 1;

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRanges.ts

@@ -5,53 +5,24 @@ import {fetchCalendarRangeForUser} from 'ChillCalendarAssets/vuejs/Calendar/api'
 import {calendarRangeToFullCalendarEvent/*, CalendarRangeEvent*/} from 'ChillCalendarAssets/vuejs/Calendar/store/utils';
 import {EventInput, EventSource} from '@fullcalendar/vue3';
 
-export interface RangeSource {
-  id: string,
-  events: EventInput[],
-  //borderColor: string,
-  //backgroundColor: string,
-  //textColor: string
-}
-
 export interface CalendarRangesState {
-  rangeSource: RangeSource,
+  ranges: EventInput[],
   rangesLoaded: {start: number, end: number}[],
   rangesIndex: Set<string>,
   key: number
 }
 
-
 type Context = ActionContext<CalendarRangesState, State>;
 
 export default <Module<CalendarRangesState, State>> {
   namespaced: true,
   state: (): CalendarRangesState => ({
-    rangeSource: {
+    ranges: [],
-      id: 'ranges',
-      events: [],
-      //borderColor: "#3788d8",
-      //backgroundColor: '#ffffff',
-      //textColor: '#444444',
-    },
     rangesLoaded: [],
     rangesIndex: new Set<string>(),
     key: 0
   }),
   getters: {
-    /*
-    getRangeSource(state: CalendarRangesState): RangeSource {
-      const o = {
-        id: 'ranges',
-        events: state.ranges,
-        //borderColor: "#3788d8",
-        //backgroundColor: '#ffffff',
-        //textColor: '#444444',
-      }
-      console.log('getRangeSource', o);
-      return o;
-    },
-
-     */
     isRangeLoaded: (state: CalendarRangesState) => ({start, end}: {start: Date, end: Date}): boolean => {
       for (let range of state.rangesLoaded) {
         if (start.getTime() === range.start && end.getTime() === range.end) {
@@ -69,14 +40,12 @@ export default <Module<CalendarRangesState, State>> {
       const toAdd = ranges
         .map(cr => calendarRangeToFullCalendarEvent(cr))
         .filter(r => !state.rangesIndex.has(r.id));
-      console.log('toAdd', toAdd);
+
-      //state.rangeSource.events.push(...toAdd);
       toAdd.forEach((r) => {
         state.rangesIndex.add(r.id);
-        state.rangeSource.events.push(r);
+        state.ranges.push(r);
       });
       state.key = state.key + toAdd.length;
-      console.log('ranges', state.rangeSource.events);
     },
     addLoaded(state: CalendarRangesState, payload: {start: Date, end: Date}) {
       state.rangesLoaded.push({start: payload.start.getTime(), end: payload.end.getTime()});
@@ -87,7 +56,7 @@ export default <Module<CalendarRangesState, State>> {
   },*/
     addRange(state: CalendarRangesState, payload: CalendarRange) {
       const asEvent = calendarRangeToFullCalendarEvent(payload);
-      state.rangeSource.events.push(asEvent);
+      state.ranges.push(asEvent);
       state.rangesIndex.add(asEvent.id);
       state.key = state.key + 1;
     },
@@ -130,7 +99,7 @@ export default <Module<CalendarRangesState, State>> {
         start,
         end
       )
-        .then((ranges) => {
+        .then((ranges: CalendarRange[]) => {
           ctx.commit('addRanges', ranges);
           return Promise.resolve(null);
         });

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/fullcalendar.ts

@@ -1,6 +1,5 @@
 import {State} from './../index';
 import {ActionContext} from 'vuex';
-import {RangeSource} from './calendarRanges';
 
 export interface FullCalendarState {
   currentView: {