diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 7893fa890..35b72581c 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -26,7 +26,7 @@
     </FullCalendar>
     <div>
       <ul class="record_actions">
-        <li>
+        <!-- <li>
           <button class="btn btn-save" :disabled="!dirty"
             @click.prevent="onClickSave">
             {{ $t('action.save')}}
@@ -35,7 +35,7 @@
             <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
             <span class="sr-only">{{ $t('loading') }}</span>
           </span>
-        </li>
+        </li> -->
         <li>
           <button v-if="disableCopyDayButton" class="btn btn-action" disabled>
             {{ $t('copy_range_to_next_day')}}
@@ -203,6 +203,7 @@ export default {
   },
   methods: {
     init() {
+      console.log('init')
       this.fetchData();
     },
     openModal() {
@@ -228,6 +229,7 @@ export default {
     fetchData() {
       this.flag.loading = true;
       fetchCalendarRangesByUser(this.userId).then(calendarRanges => new Promise((resolve, reject) => {
+        // console.log('calendar ranges', calendarRanges.results)
         let events = calendarRanges.results.map(i =>
           ({
             start: i.startDate.datetime,
@@ -291,20 +293,20 @@ export default {
     onDateSelect(payload) {
       // console.log('payload', payload);
       let events = this.calendarEvents.new.events;
-      events.push({
-          start: payload.startStr,
-          end: payload.endStr
-      });
-      this.calendarEvents.new = {
-        events: events,
-        borderColor: "#3788d8",
-        backgroundColor: '#fffadf',
-        textColor: '#444444',
-      };
+      // events.push({
+      //     start: payload.startStr,
+      //     end: payload.endStr
+      // });
+      // this.calendarEvents.new = {
+      //   events: events,
+      //   borderColor: "#3788d8",
+      //   backgroundColor: '#fffadf',
+      //   textColor: '#444444',
+      // };
       this.disableCopyDayButton = false;
       this.lastNewDate = new Date(payload.startStr);
       this.updateEventsSource();
-      this.$store.dispatch('createRange', payload);
+      // this.$store.dispatch('createRange', payload);
       postCalendarRange({
         user: {
             type: 'user',
@@ -316,6 +318,8 @@ export default {
         endDate: {
             datetime: `${payload.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
         },
+      }).then(() => {
+        this.init();
       })
     },
     onEventChange(payload) {
@@ -342,62 +346,65 @@ export default {
         this.openModal();
       }
     },
-    onClickSave(payload) {
-      this.flag.loading = true;
-      if (this.$store.state.newCalendarRanges.length > 0){
-        Promise.all(this.$store.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
-              },
-            })
-          })
-        ).then((_r) => this.resetCalendar());
+    // onClickSave(payload) {
+    //   this.flag.loading = true;
+    //   if (this.$store.state.newCalendarRanges.length > 0){
+    //     Promise.all(this.$store.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
+    //           },
+    //         })
+    //       })
+    //     ).then((_r) => this.resetCalendar());
 
-        this.$store.dispatch('clearNewCalendarRanges', payload);
-      }
-      if (this.$store.state.updateCalendarRanges.length > 0){
-        Promise.all(this.$store.state.updateCalendarRanges.map(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
-              },
-            })
-          })
-        ).then((_r) => this.resetCalendar());
-        this.$store.dispatch('clearUpdateCalendarRanges', payload);
-      }
-      if (this.$store.state.deleteCalendarRanges.length > 0){
-        Promise.all(this.$store.state.deleteCalendarRanges.map(cr => {
-            deleteCalendarRange(cr.id)
-          })
-        ).then((_r) => this.resetCalendar());
-        this.$store.dispatch('clearDeleteCalendarRanges', payload);
-      }
+    //     this.$store.dispatch('clearNewCalendarRanges', payload);
+    //   }
+    //   if (this.$store.state.updateCalendarRanges.length > 0){
+    //     Promise.all(this.$store.state.updateCalendarRanges.map(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
+    //           },
+    //         })
+    //       })
+    //     ).then((_r) => this.resetCalendar());
+    //     this.$store.dispatch('clearUpdateCalendarRanges', payload);
+    //   }
+    //   if (this.$store.state.deleteCalendarRanges.length > 0){
+    //     Promise.all(this.$store.state.deleteCalendarRanges.map(cr => {
+    //         deleteCalendarRange(cr.id)
+    //       })
+    //     ).then((_r) => this.resetCalendar());
+    //     this.$store.dispatch('clearDeleteCalendarRanges', payload);
+    //   }
 
-    },
+    // },
     onClickDelete(payload) {
       if (payload.extendedProps.hasOwnProperty("calendarRangeId")) {
-        if (payload.extendedProps.toDelete) {
-          payload.setExtendedProp('toDelete', false)
-          payload.setProp('borderColor', '#79bafc');
-          this.$store.dispatch('removeFromDeleteRange', payload);
-        } else {
-          payload.setExtendedProp('toDelete', true)
-          payload.setProp('borderColor', '#dddddd');
-          this.$store.dispatch('deleteRange', payload);
-        }
+        deleteCalendarRange(payload.extendedProps.calendarRangeId).then(() => {
+          this.init();
+        })
+        // if (payload.extendedProps.toDelete) {
+        //   payload.setExtendedProp('toDelete', false)
+        //   payload.setProp('borderColor', '#79bafc');
+        //   this.$store.dispatch('removeFromDeleteRange', payload);
+        // } else {
+        //   payload.setExtendedProp('toDelete', true)
+        //   payload.setProp('borderColor', '#dddddd');
+        //   this.$store.dispatch('deleteRange', payload);
+        // }
       } else {
         let newEvents = this.calendarEvents.new.events;
         let filterEvents = newEvents.filter((e) =>