re-add feature to patch event

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

@@ -25,7 +25,7 @@
   </div>
   <FullCalendar :options="calendarOptions" ref="calendarRef">
     <template v-slot:eventContent='arg'>
-      <span :class="eventClasses(arg)">
+      <span :class="eventClasses(arg.event)">
           <b v-if="arg.event.extendedProps.is === 'remote'">{{ arg.event.title}}</b>
           <b v-else-if="arg.event.extendedProps.is === 'range'">{{ arg.timeText }}</b>
           <b v-else >no 'is'</b>
@@ -39,16 +39,21 @@
 
 <script setup lang="ts">
 
-import type {CalendarOptions, DatesSetArg, EventSourceInput, EventInput} from '@fullcalendar/vue3';
-import {reactive, computed, ref, watch} from "vue";
+import type {
+  CalendarOptions,
+  DatesSetArg,
+  EventInput,
+  EventInstance
+} from '@fullcalendar/vue3';
+import {reactive, computed, ref} from "vue";
 import {useStore} from "vuex";
 import {key} from './store';
 import '@fullcalendar/core/vdom'; // solves problem with Vite
-import frLocale from '@fullcalendar/core/locales/fr';
 import FullCalendar from '@fullcalendar/vue3';
-import interactionPlugin from "@fullcalendar/interaction";
+import frLocale from '@fullcalendar/core/locales/fr';
+import interactionPlugin, {DropArg, EventResizeDoneArg} from "@fullcalendar/interaction";
 import timeGridPlugin from "@fullcalendar/timegrid";
-import {EventApi, DateSelectArg} from "@fullcalendar/core";
+import {EventApi, DateSelectArg, EventDropArg} from "@fullcalendar/core";
 
 const store = useStore(key);
 
@@ -60,11 +65,16 @@ const baseOptions = ref<CalendarOptions>({
   plugins: [interactionPlugin, timeGridPlugin],
   initialView: 'timeGridWeek',
   initialDate: new Date(),
+  scrollTimeReset: false,
   selectable: true,
   // when the dates are changes in the fullcalendar view OR when new events are added
   datesSet: onDatesSet,
   // when a date is selected
   select: onDateSelect,
+  // when a event is resized
+  eventResize: onEventDropOrResize,
+  // when an event is moved
+  eventDrop: onEventDropOrResize,
   selectMirror: false,
   editable: true,
   slotMinTime: "08:00:00",
@@ -84,8 +94,7 @@ const ranges = computed<EventInput[]>(() => {
  * return the show classes for the event
  * @param arg
  */
-const eventClasses = function(arg: EventApi): object {
-  console.log('eventClasses', arg);
+const eventClasses = function(arg: EventInstance): object {
   return {'calendarRangeItems': true};
 }
 
@@ -142,6 +151,16 @@ function onClickDelete(event: EventApi): void {
   store.dispatch('calendarRanges/deleteRange', event.extendedProps.calendarRangeId);
 }
 
+function onEventDropOrResize(payload: EventDropArg | EventResizeDoneArg) {
+  const changedEvent = payload.event;
+  console.log('eventDropOrResize', payload);
+
+  store.dispatch('calendarRanges/patchRangeTime', {
+    calendarRangeId: payload.event.extendedProps.calendarRangeId,
+    start: payload.event.start,
+    end: payload.event.end,
+  });
+};
 
 </script>