diff --git a/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php b/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php
index 5f20f5968..f4c5411f8 100644
--- a/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php
+++ b/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php
@@ -74,6 +74,8 @@ class ChillCalendarExtension extends Extension implements PrependExtensionInterf
                                 Request::METHOD_GET => true,
                                 Request::METHOD_HEAD => true,
                                 Request::METHOD_POST => true,
+                                Request::METHOD_PATCH => true,
+                                Request::METHOD_DELETE => true,
                             ]
                         ],
                     ]
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index ace1ec5f4..e28655ab4 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -7,7 +7,10 @@
         <i>&nbsp;{{ arg.event.title }}</i>
       </template>
     </FullCalendar>
-
+    <button class="btn btn-save"
+        @click.prevent="onClickSave">
+        {{ $t('action.save')}}
+    </button>
   </div>
 </template>
 
@@ -32,7 +35,11 @@ export default {
       showMyCalendar: true,
       calendarEvents: {
          userCalendar: [],
-         userCalendarRange: []
+         userCalendarRange: [],
+         new: {
+           events: [],
+           color: "red"
+         }
       },
       calendarOptions: {
         locale: frLocale,
@@ -43,7 +50,7 @@ export default {
         selectable: true,
         select: this.onDateSelect,
         eventChange: this.onEventChange,
-        eventClick: this.onEventClick,
+        // eventClick: this.onEventClick,
         selectMirror: true,
         editable: true,
         weekends: false,
@@ -67,6 +74,7 @@ export default {
           ({
             start: i.startDate.datetime,
             end: i.endDate.datetime,
+            calendarRangeId: i.id
           })
         );
         let calendarRangeEvents = {
@@ -100,6 +108,7 @@ export default {
     updateEventsSource() {
       this.calendarOptions.eventSources = [];
       this.calendarOptions.eventSources.push(this.calendarEvents.userCalendarRange);
+      this.calendarOptions.eventSources.push(this.calendarEvents.new);
       if (this.showMyCalendar) {
           this.calendarOptions.eventSources.push(this.calendarEvents.userCalendar);
       }
@@ -113,15 +122,25 @@ export default {
     },
     onDateSelect(payload) {
       console.log(payload)
+      this.calendarEvents.new.events.push({ //TODO does not work
+          start: payload.startStr,
+          end: payload.endStr,
+      });
+      this.updateEventsSource();
       this.$store.dispatch('createRange', payload);
     },
     onEventChange(payload) {
       console.log(payload)
       this.$store.dispatch('updateRange', payload);
+      //TODO update the eventsSource with payload, or use the store for updating the eventsSource
     },
-    onEventClick(payload) {
-      console.log(payload)
-    },
+    // onEventClick(payload) {
+    //   console.log(payload)
+    //   //TODO update the eventsSource with payload, or use the store for updating the eventsSource
+    // },
+    onClickSave(payload){
+      this.$store.dispatch('saveRanges', payload);
+    }
   },
   mounted() {
     this.init();
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
index 457069de7..cec206661 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
@@ -1,5 +1,6 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
+import { postCalendarRange, patchCalendarRange } from '../_api/api';
 
 const debug = process.env.NODE_ENV !== 'production';
 
@@ -12,10 +13,23 @@ const store = createStore({
    },
    mutations: {
       updateRange(state, payload) {
-         state.updateCalendarRanges.push({start: payload.start, end: payload.end});
+         state.updateCalendarRanges.push({
+            id: payload.event.extendedProps.calendarRangeId,
+            start: payload.event.start,
+            end: payload.event.end
+         });
       },
       addRange(state, payload) {
          state.newCalendarRanges.push({start: payload.start, end: payload.end});
+      },
+      clearNewCalendarRanges(state) {
+         state.newCalendarRanges = [];
+      },
+      clearUpdateCalendarRanges(state) {
+         state.updateCalendarRanges = [];
+      },
+      deleteUpdateCalendarRanges(state) {
+         state.deleteCalendarRanges = [];
       }
    },
    actions: {
@@ -29,10 +43,52 @@ const store = createStore({
       },
       saveRanges({ commit }, payload) {
          console.log('### action saveRange', payload);
-         postRange()
+         console.log(this.state)
+         //TODO: if smthg new in newCalendarRange, postRange(), if smthg to update in updateCalendarRanges, update...
+         if (this.state.newCalendarRanges.length > 0){
+            this.state.newCalendarRanges.map(cr => {
+               postCalendarRange({
+                  user: {
+                     type: 'user',
+                     id: window.userId,
+                  },
+                  startDate: {
+                     datetime: `${cr.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
+                  },
+                  endDate: {
+                     datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
+                  },
+               }, 'POST');
+            })
+            commit('clearNewCalendarRanges');
+         }
+         if (this.state.updateCalendarRanges.length > 0){
+            this.state.updateCalendarRanges.map(cr => {
+               console.log(cr)
+               patchCalendarRange(cr.id,
+                  {
+                  startDate: {
+                     datetime: `${cr.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
+                  },
+                  endDate: {
+                     datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
+                  },
+               });
+            })
+            commit('clearUpdateCalendarRanges');
+         }
+         if (this.state.deleteCalendarRanges.length > 0){
+            this.state.deleteCalendarRanges.map(cr => {
+               postCalendarRange({
+                  id: cr.id //TODO check functionning
+               }, 'DELETE');
+            })
+            commit('deleteUpdateCalendarRanges');
+         }
       },
 
   }
 });
 
+
 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 2c08068fd..c062d0d6e 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
@@ -35,8 +35,49 @@ const fetchCalendar = (mainUserId) => {
       });
 };
 
+
+/*
+* Endpoint chill_api_single_calendar_range__entity_create
+* method POST or DELETE, post CalendarRange entity
+*/
+const postCalendarRange = (body, method) => {
+   const url = `/api/1.0/calendar/calendar-range.json?`;
+   return fetch(url, {
+      method: method,
+      headers: {
+         'Content-Type': 'application/json;charset=utf-8'
+      },
+      body: JSON.stringify(body)
+   }).then(response => {
+      if (response.ok) { return response.json(); }
+      throw Error('Error with request resource response');
+   });
+};
+
+/*
+* Endpoint chill_api_single_calendar_range__entity
+* method PATCH, patch CalendarRange entity
+*/
+const patchCalendarRange = (id, body) => {
+   console.log(body)
+   const url = `/api/1.0/calendar/calendar-range/${id}.json`;
+   return fetch(url, {
+      method: 'PATCH',
+      headers: {
+         'Content-Type': 'application/json;charset=utf-8'
+      },
+      body: JSON.stringify(body)
+   }).then(response => {
+      if (response.ok) { return response.json(); }
+      throw Error('Error with request resource response');
+   });
+};
+
+
 export {
    fetchCalendarRanges,
    fetchCalendar,
-   fetchCalendarRangesByUser
+   fetchCalendarRangesByUser,
+   postCalendarRange,
+   patchCalendarRange
 };