diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/types.ts b/src/Bundle/ChillCalendarBundle/Resources/public/types.ts
index 3537da314..d3920ad17 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/types.ts
@@ -12,12 +12,17 @@ export interface CalendarRange {
   updatedBy: User;
 }
 
-export interface CalendarRangeEdit {
+export interface CalendarRangeCreate {
   user: UserAssociatedInterface,
   startDate: DateTime,
   endDate: DateTime
 }
 
+export interface CalendarRangeEdit {
+  startDate?: DateTime,
+  endDate?: DateTime
+}
+
 export interface Calendar {
   id: number;
 }
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
index 7bdfea233..9cb1fdc13 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
+++ b/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>
 
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRanges.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRanges.ts
index d57b427c8..e25481e0c 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRanges.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRanges.ts
@@ -1,9 +1,8 @@
 import {State} from './../index';
 import {ActionContext, Module} from 'vuex';
-import {CalendarRange, CalendarRangeEdit} from "../../../../types";
+import {CalendarRange, CalendarRangeCreate, CalendarRangeEdit} from "../../../../types";
 import {fetchCalendarRangeForUser} from '../../../Calendar/api';
 import {calendarRangeToFullCalendarEvent} from '../../../Calendar/store/utils';
-import {UserAssociatedInterface} from "../../../../../../../ChillMainBundle/Resources/public/types";
 import {EventInput} from '@fullcalendar/vue3';
 import {makeFetch} from "../../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
 import {datetimeToISO} from "../../../../../../../ChillMainBundle/Resources/public/chill/js/date";
@@ -91,6 +90,17 @@ export default <Module<CalendarRangesState, State>>{
         state.key = state.key + 1;
       }
     },
+    updateRange(state, range: CalendarRange) {
+      const found = state.ranges.find(r => r.calendarRangeId === range.id && r.is === "range");
+      const newEvent = calendarRangeToFullCalendarEvent(range);
+
+      if (found !== undefined) {
+        found.start = newEvent.start;
+        found.end = newEvent.end;
+      }
+
+      state.key = state.key + 1;
+    }
   },
   actions: {
     fetchRanges(ctx: Context, payload: { start: Date, end: Date }): Promise<null> {
@@ -141,9 +151,9 @@ export default <Module<CalendarRangesState, State>>{
         endDate: {
           datetime: datetimeToISO(end)
         },
-      } as CalendarRangeEdit;
+      } as CalendarRangeCreate;
 
-      return makeFetch<CalendarRangeEdit, CalendarRange>('POST', url, body)
+      return makeFetch<CalendarRangeCreate, CalendarRange>('POST', url, body)
         .then((newRange) => {
 
           ctx.commit('addRange', newRange);
@@ -156,14 +166,33 @@ export default <Module<CalendarRangesState, State>>{
           throw error;
         })
     },
-    deleteRange({commit}, calendarRangeId: number) {
+    deleteRange(ctx, calendarRangeId: number) {
       const url = `/api/1.0/calendar/calendar-range/${calendarRangeId}.json`;
 
       makeFetch<undefined, never>('DELETE', url)
         .then((_) => {
-          commit('removeRange', calendarRangeId);
+          ctx.commit('removeRange', calendarRangeId);
         });
     },
+    patchRangeTime(ctx, {calendarRangeId, start, end}: {calendarRangeId: number, start: Date, end: Date}): void {
+      const url = `/api/1.0/calendar/calendar-range/${calendarRangeId}.json`;
+      const body = {
+        startDate: {
+          datetime: datetimeToISO(start)
+        },
+        endDate: {
+          datetime: datetimeToISO(end)
+        },
+      } as CalendarRangeEdit;
+
+      makeFetch<CalendarRangeEdit, CalendarRange>('PATCH', url, body)
+        .then((range) => {
+          ctx.commit('updateRange', range);
+        })
+        .catch((error) => {
+          console.log(error);
+        })
+    }
 
   }
 };