change ranges to 15min instead of 30 + save new range immediately

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue

@@ -114,7 +114,7 @@
         </template>
 
       </modal>
-   </teleport>
+  </teleport>
 </template>
 
 <script>
@@ -148,12 +148,12 @@ export default {
       showMyCalendar: true,
       myCalendarClickedEvent: null,
       calendarEvents: {
-         userCalendar: null,
-         userCalendarRange: null,
-         new: {
-           events: [],
-           color: "#3788d8"
-         }
+        userCalendar: null,
+        userCalendarRange: null,
+        new: {
+          events: [],
+          color: "#3788d8"
+        }
       },
       lastNewDate: null,
       disableCopyDayButton: true,
@@ -172,13 +172,16 @@ export default {
         selectMirror: false,
         editable: true,
         weekends: false,
+        slotDuration: '00:15:00',
+        slotMinutes: 15,
+        slotMinTime: "08:00:00",
+        slotMaxTime: "18:00:00",
         headerToolbar: {
           left: 'prev,next today',
           center: 'title',
           right: 'dayGridMonth,timeGridWeek,timeGridDay'
         },
       },
-      
     }
   },
   computed: {
@@ -277,7 +280,7 @@ export default {
       if (this.showMyCalendar) {
           this.calendarOptions.eventSources.push(this.calendarEvents.userCalendar);
       }
-      console.log(this.calendarOptions.eventSources);
+      // console.log(this.calendarOptions.eventSources);
     },
     toggleMyCalendar(value) {
       this.showMyCalendar = value;
@@ -286,6 +289,7 @@ export default {
       this.calendarOptions.weekends = !this.calendarOptions.weekends;
     },
     onDateSelect(payload) {
+      // console.log('payload', payload);
       let events = this.calendarEvents.new.events;
       events.push({
           start: payload.startStr,
@@ -294,13 +298,25 @@ export default {
       this.calendarEvents.new = {
         events: events,
         borderColor: "#3788d8",
-        backgroundColor: '#fffadf ',
+        backgroundColor: '#fffadf',
         textColor: '#444444',
       };
       this.disableCopyDayButton = false;
       this.lastNewDate = new Date(payload.startStr);
       this.updateEventsSource();
       this.$store.dispatch('createRange', payload);
+      postCalendarRange({
+        user: {
+            type: 'user',
+            id: window.userId,
+        },
+        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
+        },
+      })
     },
     onEventChange(payload) {
     },
@@ -322,7 +338,7 @@ export default {
           professionals: payload.event.extendedProps.professionals,
           comment: payload.event.extendedProps.comment
         };
-        console.log(this.myCalendarClickedEvent)
+        // console.log(this.myCalendarClickedEvent)
         this.openModal();
       }
     },
@@ -407,7 +423,7 @@ export default {
       return date.getDay() === 5
     },
     copyDay(_payload) {
-      console.log(this.calendarEvents.new);
+      // console.log(this.calendarEvents.new);
       if (this.calendarEvents.new.events.length > 0) {
         // Create the copied events
         let increment = !this.calendarOptions.weekends && this.isFriday(this.lastNewDate) ? 24*60*60*1000*3 : 24*60*60*1000;
@@ -426,7 +442,7 @@ export default {
           events: events,
           color: "#3788d8"
         };
-        console.log(copiedEvents);
+        // console.log(copiedEvents);
  
         // Add to the calendar
         let newEvents = this.calendarEvents.new.events;