diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 1eaf04335..ace1ec5f4 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -7,6 +7,7 @@
         <i>&nbsp;{{ arg.event.title }}</i>
       </template>
     </FullCalendar>
+
   </div>
 </template>
 
@@ -17,7 +18,7 @@ import FullCalendar from '@fullcalendar/vue3';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import timeGridPlugin from '@fullcalendar/timegrid';
-import { fetchCalendar } from '../_api/api';
+import { fetchCalendar, fetchCalendarRangesByUser } from '../_api/api';
 
 export default {
   name: "App",
@@ -30,7 +31,8 @@ export default {
       userId: window.userId,
       showMyCalendar: true,
       calendarEvents: {
-         user: [],
+         userCalendar: [],
+         userCalendarRange: []
       },
       calendarOptions: {
         locale: frLocale,
@@ -59,30 +61,49 @@ export default {
     },
     fetchData() {
       console.log(this.userId);
-      fetchCalendar(this.userId).then(calendar => new Promise((resolve, reject) => {
-        let results = calendar.results;
-        let events = results.map(i => 
+
+      fetchCalendarRangesByUser(this.userId).then(calendarRanges => new Promise((resolve, reject) => {
+        let events = calendarRanges.results.map(i =>
           ({
             start: i.startDate.datetime,
             end: i.endDate.datetime,
           })
         );
-        let calendarEventsCurrentUser = {
-            events: events,
-            color: 'darkblue',
-            id: 1000,
-            editable: false
+        let calendarRangeEvents = {
+              events: events,
+              color: 'orange',
+              textColor: '#444444'
         };
-        this.calendarEvents.user = calendarEventsCurrentUser;
-        this.updateEventsSource()
-        resolve();
+        this.calendarEvents.userCalendarRange = calendarRangeEvents;
+
+        fetchCalendar(this.userId).then(calendar => new Promise((resolve, reject) => {
+          let events = calendar.results.map(i =>
+            ({
+              start: i.startDate.datetime,
+              end: i.endDate.datetime,
+            })
+          );
+          let calendarEventsCurrentUser = {
+              events: events,
+              color: 'darkblue',
+              id: 1000,
+              editable: false
+          };
+          this.calendarEvents.userCalendar = calendarEventsCurrentUser;
+          this.updateEventsSource();
+          resolve();
+        }));
+
+      resolve();
       }));
     },
     updateEventsSource() {
       this.calendarOptions.eventSources = [];
+      this.calendarOptions.eventSources.push(this.calendarEvents.userCalendarRange);
       if (this.showMyCalendar) {
-          this.calendarOptions.eventSources.push(this.calendarEvents.user);
+          this.calendarOptions.eventSources.push(this.calendarEvents.userCalendar);
       }
+      console.log(this.calendarOptions.eventSources);
     },
     toggleMyCalendar(value) {
       this.showMyCalendar = value;
@@ -92,11 +113,14 @@ export default {
     },
     onDateSelect(payload) {
       console.log(payload)
+      this.$store.dispatch('createRange', payload);
     },
     onEventChange(payload) {
-      //this.$store.dispatch('updateEvent', payload);
+      console.log(payload)
+      this.$store.dispatch('updateRange', payload);
     },
     onEventClick(payload) {
+      console.log(payload)
     },
   },
   mounted() {
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js
index ca338a3be..a10a16601 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'
 
 import App from './App.vue';
 
@@ -10,7 +10,7 @@ const i18n = _createI18n(appMessages);
 const app = createApp({
    template: `<app></app>`,
 })
-//.use(store)
+.use(store)
 .use(i18n)
 .component('app', App)
 .mount('#myCalendar');
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
new file mode 100644
index 000000000..457069de7
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
@@ -0,0 +1,38 @@
+import 'es6-promise/auto';
+import { createStore } from 'vuex';
+
+const debug = process.env.NODE_ENV !== 'production';
+
+const store = createStore({
+   strict: debug,
+   state: {
+     newCalendarRanges: [],
+     updateCalendarRanges: [],
+     deleteCalendarRanges: []
+   },
+   mutations: {
+      updateRange(state, payload) {
+         state.updateCalendarRanges.push({start: payload.start, end: payload.end});
+      },
+      addRange(state, payload) {
+         state.newCalendarRanges.push({start: payload.start, end: payload.end});
+      }
+   },
+   actions: {
+      createRange({ commit }, payload) {
+         console.log('### action createRange', payload);
+         commit('addRange', payload);
+      },
+      updateRange({ commit }, payload) {
+         console.log('### action updateRange', payload);
+         commit('updateRange', payload);
+      },
+      saveRanges({ commit }, payload) {
+         console.log('### action saveRange', payload);
+         postRange()
+      },
+
+  }
+});
+
+export default store;
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
index a11ca8498..2c08068fd 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
@@ -12,6 +12,15 @@ const fetchCalendarRanges = () => {
       });
 };
 
+const fetchCalendarRangesByUser = (userId) => {
+   const url = `/api/1.0/calendar/calendar-range-available.json?user=${userId}`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response');
+      });
+};
+
 /*
 * Endpoint chill_api_single_calendar
 * method GET, get Calendar events, can be filtered by mainUser
@@ -28,5 +37,6 @@ const fetchCalendar = (mainUserId) => {
 
 export {
    fetchCalendarRanges,
-   fetchCalendar
+   fetchCalendar,
+   fetchCalendarRangesByUser
 };