first reactive calendar

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: {
-      id: 'ranges',
-      events: [],
-      //borderColor: "#3788d8",
-      //backgroundColor: '#ffffff',
-      //textColor: '#444444',
-    },
+    ranges: [],
     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: {