diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js
index a10a16601..bb7c75d35 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js
@@ -1,7 +1,7 @@
 import { createApp } from 'vue';
 import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
 import { appMessages } from './i18n'
-import store from './store'
+import store from './store/index'
 
 import App from './App.vue';
 
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
deleted file mode 100644
index 9bc62eb98..000000000
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
+++ /dev/null
@@ -1,157 +0,0 @@
-import 'es6-promise/auto';
-import { createStore } from 'vuex';
-import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
-
-const debug = process.env.NODE_ENV !== 'production';
-
-const store = createStore({
-   strict: debug,
-   state: {
-      ranges: [],
-      appointments: [],
-      appointmentsShown: true
-   },
-   getters: {
-      rangeSource (state) {
-         return {
-            events: state.ranges,
-            borderColor: "#3788d8",
-            backgroundColor: '#ffffff',
-            textColor: '#444444',
-         }
-      },
-      appointmentSource (state) {
-         if (state.appointmentsShown) {
-            return {
-               events: state.appointments,
-               color: "darkblue",
-               id: 1000,
-               editable: false
-            }
-         } else {
-            return null
-         }
-      }
-   },
-   mutations: {
-      setRanges(state, payload) {
-         state.ranges = payload;
-      },
-      setRangesToCopy(state, payload) {
-         state.rangesToCopy = payload
-      },
-      addRange(state, payload) {
-         state.ranges = [...state.ranges, payload];
-      },
-      removeRange(state, payload) {
-         const filteredCollection = state.ranges.filter(
-            (r) => r.calendarRangeId !== payload
-         )
-         state.ranges = filteredCollection;
-      },
-      setAppointments(state, payload) {
-         state.appointments = payload;
-      },
-      setAppointmentShown(state, payload) {
-         state.appointmentsShown = payload
-      }
-   },
-   actions: {
-      fetchRanges({commit}, payload = null) {
-         const url = payload ? `/api/1.0/calendar/calendar-range-available.json?user=${payload.userId}&start=${payload.dateToCopy}` :
-               `/api/1.0/calendar/calendar-range-available.json?user=${window.userId}`
-         return makeFetch('GET', url)
-            .then((response) => {
-               if (payload) {
-                  return response.results;
-               } else {
-                  const ranges = response.results.map(range => (
-                     {
-                        start: range.startDate.datetime,
-                        end: range.endDate.datetime,
-                        calendarRangeId: range.id,
-                        toDelete: false
-                     }
-                  ));
-                  commit('setRanges', ranges)
-               }
-            })
-            .catch((error) => {
-               console.log(error);
-            })
-      },
-      postRange({commit}, payload) {
-         const url = `/api/1.0/calendar/calendar-range.json?`;
-         makeFetch('POST', url, payload)
-         .then((response) => {
-            const newRange =
-               {
-                  start: response.startDate.datetime,
-                  end: response.endDate.datetime,
-                  calendarRangeId: response.id,
-                  toDelete: false
-               }
-            commit('addRange', newRange)
-         })
-         .catch((error) => {
-            console.log(error);
-         })
-      },
-      deleteRange({commit}, payload) {
-         const url = `/api/1.0/calendar/calendar-range/${payload}.json`;
-         makeFetch('DELETE', url)
-         .then((response) => {
-            if (response == 200) {
-               commit('removeRange', payload);
-            }
-         })
-         .catch((error) => {
-            console.log(error);
-         })
-      },
-      patchRange({commit}, payload) {
-         const url = `/api/1.0/calendar/calendar-range/${payload.extendedProps.calendarRangeId}.json`;
-         const body = {
-            startDate: {
-                  datetime: `${payload.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
-            },
-            endDate: {
-                  datetime: `${payload.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
-            },
-         }
-         makeFetch('PATCH', url, body)
-         .then((response) => {
-            console.log('response', response);
-         })
-         .catch((error) => {
-            console.log(error);
-         })
-      },
-      fetchAppointments({commit}, payload) {
-         const url = `/api/1.0/calendar/calendar.json?main_user=${payload}&item_per_page=1000`
-         makeFetch('GET', url)
-         .then((response) => {
-            const appointments = response.results.map(a => (
-               {
-                  myCalendar: true,
-                  calendarId: a.id,
-                  start: a.startDate.datetime,
-                  end: a.endDate.datetime,
-                  user: a.user,
-                  mainUser: a.mainUser,
-                  persons: a.persons,
-                  professionals: a.professionals,
-                  comment: a.comment
-               })
-            );
-            commit('setAppointments', appointments)
-         })
-         .catch((error) => {
-            console.log(error);
-         })
-      },
-   }
-});
-
-
-export default store;
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/actions.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/actions.js
new file mode 100644
index 000000000..c2f877b8d
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/actions.js
@@ -0,0 +1,99 @@
+import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods';
+
+const actions = {
+  fetchRanges({commit}, payload = null) {
+    const url = payload ? `/api/1.0/calendar/calendar-range-available.json?user=${payload.userId}&start=${payload.dateToCopy}` :
+      `/api/1.0/calendar/calendar-range-available.json?user=${window.userId}`
+    return makeFetch('GET', url)
+      .then((response) => {
+        if (payload) {
+          return response.results;
+        } else {
+          const ranges = response.results.map(range => (
+            {
+              start: range.startDate.datetime,
+              end: range.endDate.datetime,
+              calendarRangeId: range.id,
+              toDelete: false
+            }
+          ));
+          commit('setRanges', ranges)
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      })
+  },
+  postRange({commit}, payload) {
+    const url = `/api/1.0/calendar/calendar-range.json?`;
+    makeFetch('POST', url, payload)
+      .then((response) => {
+        const newRange =
+          {
+            start: response.startDate.datetime,
+            end: response.endDate.datetime,
+            calendarRangeId: response.id,
+            toDelete: false
+          }
+        commit('addRange', newRange)
+      })
+      .catch((error) => {
+        console.log(error);
+      })
+  },
+  deleteRange({commit}, payload) {
+    const url = `/api/1.0/calendar/calendar-range/${payload}.json`;
+    makeFetch('DELETE', url)
+      .then((response) => {
+        if (response == 200) {
+          commit('removeRange', payload);
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      })
+  },
+  patchRange({commit}, payload) {
+    const url = `/api/1.0/calendar/calendar-range/${payload.extendedProps.calendarRangeId}.json`;
+    const body = {
+      startDate: {
+        datetime: `${payload.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
+      },
+      endDate: {
+        datetime: `${payload.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
+      },
+    }
+    makeFetch('PATCH', url, body)
+      .then((response) => {
+        console.log('response', response);
+      })
+      .catch((error) => {
+        console.log(error);
+      })
+  },
+  fetchAppointments({commit}, payload) {
+    const url = `/api/1.0/calendar/calendar.json?main_user=${payload}&item_per_page=1000`
+    makeFetch('GET', url)
+      .then((response) => {
+        const appointments = response.results.map(a => (
+          {
+            myCalendar: true,
+            calendarId: a.id,
+            start: a.startDate.datetime,
+            end: a.endDate.datetime,
+            user: a.user,
+            mainUser: a.mainUser,
+            persons: a.persons,
+            professionals: a.professionals,
+            comment: a.comment
+          })
+        );
+        commit('setAppointments', appointments)
+      })
+      .catch((error) => {
+        console.log(error);
+      })
+  },
+};
+
+export default actions;
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/getters.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/getters.js
new file mode 100644
index 000000000..9632b3a9a
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/getters.js
@@ -0,0 +1,24 @@
+const getters = {
+  rangeSource(state) {
+    return {
+      events: state.ranges,
+      borderColor: "#3788d8",
+      backgroundColor: '#ffffff',
+      textColor: '#444444',
+    }
+  },
+  appointmentSource(state) {
+    if (state.appointmentsShown) {
+      return {
+        events: state.appointments,
+        color: "darkblue",
+        id: 1000,
+        editable: false
+      }
+    } else {
+      return null
+    }
+  }
+};
+
+export default getters;
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.js
new file mode 100644
index 000000000..d99d33a2b
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.js
@@ -0,0 +1,21 @@
+import 'es6-promise/auto';
+import {createStore} from 'vuex';
+import actions from './actions';
+import getters from './getters';
+import mutations from './mutations';
+
+const debug = process.env.NODE_ENV !== 'production';
+
+const store = createStore({
+  strict: debug,
+  state: {
+    ranges: [],
+    appointments: [],
+    appointmentsShown: true
+  },
+  getters,
+  mutations,
+  actions,
+});
+
+export default store;
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/mutations.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/mutations.js
new file mode 100644
index 000000000..3252c9dbf
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/mutations.js
@@ -0,0 +1,25 @@
+const mutations = {
+  setRanges(state, payload) {
+    state.ranges = payload;
+  },
+  setRangesToCopy(state, payload) {
+    state.rangesToCopy = payload
+  },
+  addRange(state, payload) {
+    state.ranges = [...state.ranges, payload];
+  },
+  removeRange(state, payload) {
+    const filteredCollection = state.ranges.filter(
+      (r) => r.calendarRangeId !== payload
+    )
+    state.ranges = filteredCollection;
+  },
+  setAppointments(state, payload) {
+    state.appointments = payload;
+  },
+  setAppointmentShown(state, payload) {
+    state.appointmentsShown = payload
+  }
+};
+
+export default mutations;