@schedule-x/resize - npm Package Compare versions

Comparing version 1.34.0 to 1.35.0

./dist/core.cjs.js

@@ -80,9 +80,12 @@ 'use strict';
 
-const updateEventsList = ($app, calendarEvent, oldEventEnd, newEventEnd) => {
-    const rrule = calendarEvent._getForeignProperties().rrule;
-    calendarEvent.end = newEventEnd;
+const updateEventsList = ($app, eventCopy, oldEventEnd, newEventEnd) => {
+    const rrule = eventCopy._getForeignProperties().rrule;
     if (rrule && $app.config.plugins.eventRecurrence) {
-        $app.config.plugins.eventRecurrence.updateRecurrenceOnResize(calendarEvent.id, oldEventEnd, newEventEnd);
+        $app.config.plugins.eventRecurrence.updateRecurrenceOnResize(eventCopy.id, oldEventEnd, newEventEnd);
         return;
     }
+    const eventToUpdate = $app.calendarEvents.list.value.find((event) => event.id === eventCopy.id);
+    if (!eventToUpdate)
+        return;
+    eventToUpdate.end = eventCopy.end;
     $app.calendarEvents.list.value = [...$app.calendarEvents.list.value];
@@ -92,3 +95,3 @@ };
 class TimeGridEventResizer {
-    constructor($app, calendarEvent, initialY, CHANGE_THRESHOLD_IN_TIME_POINTS, dayBoundariesDateTime) {
+    constructor($app, eventCopy, updateCopy, initialY, CHANGE_THRESHOLD_IN_TIME_POINTS, dayBoundariesDateTime) {
         Object.defineProperty(this, "$app", {
@@ -100,8 +103,14 @@ enumerable: true,
         });
-        Object.defineProperty(this, "calendarEvent", {
+        Object.defineProperty(this, "eventCopy", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: calendarEvent
+            value: eventCopy
         });
+        Object.defineProperty(this, "updateCopy", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: updateCopy
+        });
         Object.defineProperty(this, "initialY", {
@@ -137,2 +146,8 @@ enumerable: true,
         });
+        Object.defineProperty(this, "lastValidEnd", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
         Object.defineProperty(this, "handleMouseMove", {
@@ -158,10 +173,19 @@ enumerable: true,
             value: () => {
+                this.setNewTimeForEventEnd(this.CHANGE_THRESHOLD_IN_TIME_POINTS * this.lastIntervalDiff);
+                updateEventsList(this.$app, this.eventCopy, this.originalEventEnd, this.lastValidEnd);
+                this.updateCopy(undefined);
+                this.$app.elements.calendarWrapper.classList.remove('sx__is-resizing');
                 this.$app.elements.calendarWrapper.removeEventListener('mousemove', this.handleMouseMove);
                 if (this.$app.config.callbacks.onEventUpdate) {
-                    this.$app.config.callbacks.onEventUpdate(this.calendarEvent._getExternalEvent());
+                    this.$app.config.callbacks.onEventUpdate(this.eventCopy._getExternalEvent());
                 }
             }
         });
+        this.originalEventEnd = this.eventCopy.end;
+        this.lastValidEnd = this.eventCopy.end;
+        const calendarWrapper = this.$app.elements.calendarWrapper;
+        if (!calendarWrapper)
+            return;
+        calendarWrapper.classList.add('sx__is-resizing');
         this.setupEventListeners();
-        this.originalEventEnd = this.calendarEvent.end;
     }
@@ -173,8 +197,9 @@ setupEventListeners() {
     setNewTimeForEventEnd(pointsToAdd) {
-        const endBeforeUpdate = this.calendarEvent.end;
         const newEnd = addTimePointsToDateTime(this.originalEventEnd, pointsToAdd);
         if (newEnd > this.dayBoundariesDateTime.end ||
-            newEnd <= this.calendarEvent.start)
+            newEnd <= this.eventCopy.start)
             return;
-        updateEventsList(this.$app, this.calendarEvent, endBeforeUpdate, newEnd);
+        this.lastValidEnd = newEnd;
+        this.eventCopy.end = this.lastValidEnd;
+        this.updateCopy(this.eventCopy);
     }
@@ -209,3 +234,3 @@ }
 class DateGridEventResizer {
-    constructor($app, calendarEvent, initialX) {
+    constructor($app, eventCopy, updateCopy, initialX) {
         Object.defineProperty(this, "$app", {
@@ -217,8 +242,14 @@ enumerable: true,
         });
-        Object.defineProperty(this, "calendarEvent", {
+        Object.defineProperty(this, "eventCopy", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: calendarEvent
+            value: eventCopy
         });
+        Object.defineProperty(this, "updateCopy", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: updateCopy
+        });
         Object.defineProperty(this, "initialX", {
@@ -234,3 +265,3 @@ enumerable: true,
             writable: true,
-            value: void 0
+            value: 0
         });
@@ -243,2 +274,14 @@ Object.defineProperty(this, "originalEventEnd", {
         });
+        Object.defineProperty(this, "ORIGINAL_NDAYS", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "lastNDaysDiff", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
         Object.defineProperty(this, "handleMouseMove", {
@@ -250,4 +293,4 @@ enumerable: true,
                 const xDifference = event.clientX - this.initialX;
-                const daysToAdd = Math.floor(xDifference / this.dayWidth);
-                this.setNewTimeForEventEnd(daysToAdd);
+                this.lastNDaysDiff = Math.floor(xDifference / this.dayWidth);
+                this.setNewTimeForEventEnd();
             }
@@ -260,11 +303,19 @@ });
             value: () => {
+                updateEventsList(this.$app, this.eventCopy, this.originalEventEnd, this.eventCopy.end);
+                this.updateCopy(undefined);
+                this.$app.elements.calendarWrapper.classList.remove('sx__is-resizing');
                 this.$app.elements.calendarWrapper.removeEventListener('mousemove', this.handleMouseMove);
                 if (this.$app.config.callbacks.onEventUpdate) {
-                    this.$app.config.callbacks.onEventUpdate(this.calendarEvent._getExternalEvent());
+                    this.$app.config.callbacks.onEventUpdate(this.eventCopy._getExternalEvent());
                 }
             }
         });
+        this.originalEventEnd = eventCopy.end;
+        this.ORIGINAL_NDAYS = eventCopy._nDaysInGrid || 0;
+        const calendarWrapper = this.$app.elements.calendarWrapper;
+        if (!calendarWrapper)
+            return;
+        calendarWrapper.classList.add('sx__is-resizing');
+        this.dayWidth = getTimeGridDayWidth(this.$app);
         this.setupEventListeners();
-        this.originalEventEnd = calendarEvent.end;
-        this.dayWidth = getTimeGridDayWidth(this.$app);
     }
@@ -275,11 +326,12 @@ setupEventListeners() {
     }
-    setNewTimeForEventEnd(daysToAdd) {
-        const endBeforeUpdate = this.calendarEvent.end;
-        const newEnd = addDays(this.originalEventEnd, daysToAdd);
+    setNewTimeForEventEnd() {
+        const newEnd = addDays(this.originalEventEnd, this.lastNDaysDiff);
         if (newEnd > this.$app.calendarState.range.value.end ||
-            newEnd < this.calendarEvent.start ||
+            newEnd < this.eventCopy.start ||
             newEnd <
                 toDateString(toJSDate(this.$app.calendarState.range.value.start)))
             return;
-        updateEventsList(this.$app, this.calendarEvent, endBeforeUpdate, newEnd);
+        this.eventCopy.end = newEnd;
+        this.eventCopy._nDaysInGrid = this.ORIGINAL_NDAYS + this.lastNDaysDiff;
+        this.updateCopy(this.eventCopy);
     }
@@ -289,3 +341,9 @@ }
 class ResizePluginImpl {
-    constructor() {
+    constructor(minutesPerInterval) {
+        Object.defineProperty(this, "minutesPerInterval", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: minutesPerInterval
+        });
         Object.defineProperty(this, "name", {
@@ -307,12 +365,19 @@ enumerable: true,
     }
-    createTimeGridEventResizer(calendarEvent, mouseDownEvent, dayBoundariesDateTime) {
+    createTimeGridEventResizer(calendarEvent, updateCopy, mouseDownEvent, dayBoundariesDateTime) {
         if (!this.$app)
             return this.logError();
-        new TimeGridEventResizer(this.$app, calendarEvent, mouseDownEvent.clientY, 25, dayBoundariesDateTime);
+        new TimeGridEventResizer(this.$app, calendarEvent, updateCopy, mouseDownEvent.clientY, this.getTimePointsForIntervalConfig(), dayBoundariesDateTime);
     }
-    createDateGridEventResizer(calendarEvent, mouseDownEvent) {
+    createDateGridEventResizer(calendarEvent, updateCopy, mouseDownEvent) {
         if (!this.$app)
             return this.logError();
-        new DateGridEventResizer(this.$app, calendarEvent, mouseDownEvent.clientX);
+        new DateGridEventResizer(this.$app, calendarEvent, updateCopy, mouseDownEvent.clientX);
     }
+    getTimePointsForIntervalConfig() {
+        if (this.minutesPerInterval === 60)
+            return 100;
+        if (this.minutesPerInterval === 30)
+            return 50;
+        return 25;
+    }
     logError() {
@@ -322,4 +387,4 @@ console.error('The calendar is not yet initialized. Cannot resize events.');
 }
-const createResizePlugin = () => new ResizePluginImpl();
+const createResizePlugin = (minutesPerInterval = 15) => new ResizePluginImpl(minutesPerInterval);
 
 exports.createResizePlugin = createResizePlugin;

dist/core.cjs.d.ts

@@ -327,9 +327,9 @@ import { Signal } from "@preact/signals";
 interface ResizePlugin extends PluginBase {
-    createTimeGridEventResizer(calendarEvent: CalendarEventInternal, mouseDownEvent: MouseEvent, dayBoundariesDateTime: {
+    createTimeGridEventResizer(calendarEvent: CalendarEventInternal, updateCopy: (newCopy: CalendarEventInternal | undefined) => void, mouseDownEvent: MouseEvent, dayBoundariesDateTime: {
         start: string;
         end: string;
     }): void;
-    createDateGridEventResizer(calendarEvent: CalendarEventInternal, mouseDownEvent: MouseEvent): void;
+    createDateGridEventResizer(calendarEvent: CalendarEventInternal, updateCopy: (newCopy: CalendarEventInternal | undefined) => void, mouseDownEvent: MouseEvent): void;
 }
-declare const createResizePlugin: () => ResizePlugin;
+declare const createResizePlugin: (minutesPerInterval?: number) => ResizePlugin;
 export { createResizePlugin };

dist/core.cjs.js

@@ -80,9 +80,12 @@ 'use strict';
 
-const updateEventsList = ($app, calendarEvent, oldEventEnd, newEventEnd) => {
-    const rrule = calendarEvent._getForeignProperties().rrule;
-    calendarEvent.end = newEventEnd;
+const updateEventsList = ($app, eventCopy, oldEventEnd, newEventEnd) => {
+    const rrule = eventCopy._getForeignProperties().rrule;
     if (rrule && $app.config.plugins.eventRecurrence) {
-        $app.config.plugins.eventRecurrence.updateRecurrenceOnResize(calendarEvent.id, oldEventEnd, newEventEnd);
+        $app.config.plugins.eventRecurrence.updateRecurrenceOnResize(eventCopy.id, oldEventEnd, newEventEnd);
         return;
     }
+    const eventToUpdate = $app.calendarEvents.list.value.find((event) => event.id === eventCopy.id);
+    if (!eventToUpdate)
+        return;
+    eventToUpdate.end = eventCopy.end;
     $app.calendarEvents.list.value = [...$app.calendarEvents.list.value];
@@ -92,3 +95,3 @@ };
 class TimeGridEventResizer {
-    constructor($app, calendarEvent, initialY, CHANGE_THRESHOLD_IN_TIME_POINTS, dayBoundariesDateTime) {
+    constructor($app, eventCopy, updateCopy, initialY, CHANGE_THRESHOLD_IN_TIME_POINTS, dayBoundariesDateTime) {
         Object.defineProperty(this, "$app", {
@@ -100,8 +103,14 @@ enumerable: true,
         });
-        Object.defineProperty(this, "calendarEvent", {
+        Object.defineProperty(this, "eventCopy", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: calendarEvent
+            value: eventCopy
         });
+        Object.defineProperty(this, "updateCopy", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: updateCopy
+        });
         Object.defineProperty(this, "initialY", {
@@ -137,2 +146,8 @@ enumerable: true,
         });
+        Object.defineProperty(this, "lastValidEnd", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
         Object.defineProperty(this, "handleMouseMove", {
@@ -158,10 +173,19 @@ enumerable: true,
             value: () => {
+                this.setNewTimeForEventEnd(this.CHANGE_THRESHOLD_IN_TIME_POINTS * this.lastIntervalDiff);
+                updateEventsList(this.$app, this.eventCopy, this.originalEventEnd, this.lastValidEnd);
+                this.updateCopy(undefined);
+                this.$app.elements.calendarWrapper.classList.remove('sx__is-resizing');
                 this.$app.elements.calendarWrapper.removeEventListener('mousemove', this.handleMouseMove);
                 if (this.$app.config.callbacks.onEventUpdate) {
-                    this.$app.config.callbacks.onEventUpdate(this.calendarEvent._getExternalEvent());
+                    this.$app.config.callbacks.onEventUpdate(this.eventCopy._getExternalEvent());
                 }
             }
         });
+        this.originalEventEnd = this.eventCopy.end;
+        this.lastValidEnd = this.eventCopy.end;
+        const calendarWrapper = this.$app.elements.calendarWrapper;
+        if (!calendarWrapper)
+            return;
+        calendarWrapper.classList.add('sx__is-resizing');
         this.setupEventListeners();
-        this.originalEventEnd = this.calendarEvent.end;
     }
@@ -173,8 +197,9 @@ setupEventListeners() {
     setNewTimeForEventEnd(pointsToAdd) {
-        const endBeforeUpdate = this.calendarEvent.end;
         const newEnd = addTimePointsToDateTime(this.originalEventEnd, pointsToAdd);
         if (newEnd > this.dayBoundariesDateTime.end ||
-            newEnd <= this.calendarEvent.start)
+            newEnd <= this.eventCopy.start)
             return;
-        updateEventsList(this.$app, this.calendarEvent, endBeforeUpdate, newEnd);
+        this.lastValidEnd = newEnd;
+        this.eventCopy.end = this.lastValidEnd;
+        this.updateCopy(this.eventCopy);
     }
@@ -209,3 +234,3 @@ }
 class DateGridEventResizer {
-    constructor($app, calendarEvent, initialX) {
+    constructor($app, eventCopy, updateCopy, initialX) {
         Object.defineProperty(this, "$app", {
@@ -217,8 +242,14 @@ enumerable: true,
         });
-        Object.defineProperty(this, "calendarEvent", {
+        Object.defineProperty(this, "eventCopy", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: calendarEvent
+            value: eventCopy
         });
+        Object.defineProperty(this, "updateCopy", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: updateCopy
+        });
         Object.defineProperty(this, "initialX", {
@@ -234,3 +265,3 @@ enumerable: true,
             writable: true,
-            value: void 0
+            value: 0
         });
@@ -243,2 +274,14 @@ Object.defineProperty(this, "originalEventEnd", {
         });
+        Object.defineProperty(this, "ORIGINAL_NDAYS", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "lastNDaysDiff", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
         Object.defineProperty(this, "handleMouseMove", {
@@ -250,4 +293,4 @@ enumerable: true,
                 const xDifference = event.clientX - this.initialX;
-                const daysToAdd = Math.floor(xDifference / this.dayWidth);
-                this.setNewTimeForEventEnd(daysToAdd);
+                this.lastNDaysDiff = Math.floor(xDifference / this.dayWidth);
+                this.setNewTimeForEventEnd();
             }
@@ -260,11 +303,19 @@ });
             value: () => {
+                updateEventsList(this.$app, this.eventCopy, this.originalEventEnd, this.eventCopy.end);
+                this.updateCopy(undefined);
+                this.$app.elements.calendarWrapper.classList.remove('sx__is-resizing');
                 this.$app.elements.calendarWrapper.removeEventListener('mousemove', this.handleMouseMove);
                 if (this.$app.config.callbacks.onEventUpdate) {
-                    this.$app.config.callbacks.onEventUpdate(this.calendarEvent._getExternalEvent());
+                    this.$app.config.callbacks.onEventUpdate(this.eventCopy._getExternalEvent());
                 }
             }
         });
+        this.originalEventEnd = eventCopy.end;
+        this.ORIGINAL_NDAYS = eventCopy._nDaysInGrid || 0;
+        const calendarWrapper = this.$app.elements.calendarWrapper;
+        if (!calendarWrapper)
+            return;
+        calendarWrapper.classList.add('sx__is-resizing');
+        this.dayWidth = getTimeGridDayWidth(this.$app);
         this.setupEventListeners();
-        this.originalEventEnd = calendarEvent.end;
-        this.dayWidth = getTimeGridDayWidth(this.$app);
     }
@@ -275,11 +326,12 @@ setupEventListeners() {
     }
-    setNewTimeForEventEnd(daysToAdd) {
-        const endBeforeUpdate = this.calendarEvent.end;
-        const newEnd = addDays(this.originalEventEnd, daysToAdd);
+    setNewTimeForEventEnd() {
+        const newEnd = addDays(this.originalEventEnd, this.lastNDaysDiff);
         if (newEnd > this.$app.calendarState.range.value.end ||
-            newEnd < this.calendarEvent.start ||
+            newEnd < this.eventCopy.start ||
             newEnd <
                 toDateString(toJSDate(this.$app.calendarState.range.value.start)))
             return;
-        updateEventsList(this.$app, this.calendarEvent, endBeforeUpdate, newEnd);
+        this.eventCopy.end = newEnd;
+        this.eventCopy._nDaysInGrid = this.ORIGINAL_NDAYS + this.lastNDaysDiff;
+        this.updateCopy(this.eventCopy);
     }
@@ -289,3 +341,9 @@ }
 class ResizePluginImpl {
-    constructor() {
+    constructor(minutesPerInterval) {
+        Object.defineProperty(this, "minutesPerInterval", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: minutesPerInterval
+        });
         Object.defineProperty(this, "name", {
@@ -307,12 +365,19 @@ enumerable: true,
     }
-    createTimeGridEventResizer(calendarEvent, mouseDownEvent, dayBoundariesDateTime) {
+    createTimeGridEventResizer(calendarEvent, updateCopy, mouseDownEvent, dayBoundariesDateTime) {
         if (!this.$app)
             return this.logError();
-        new TimeGridEventResizer(this.$app, calendarEvent, mouseDownEvent.clientY, 25, dayBoundariesDateTime);
+        new TimeGridEventResizer(this.$app, calendarEvent, updateCopy, mouseDownEvent.clientY, this.getTimePointsForIntervalConfig(), dayBoundariesDateTime);
     }
-    createDateGridEventResizer(calendarEvent, mouseDownEvent) {
+    createDateGridEventResizer(calendarEvent, updateCopy, mouseDownEvent) {
         if (!this.$app)
             return this.logError();
-        new DateGridEventResizer(this.$app, calendarEvent, mouseDownEvent.clientX);
+        new DateGridEventResizer(this.$app, calendarEvent, updateCopy, mouseDownEvent.clientX);
     }
+    getTimePointsForIntervalConfig() {
+        if (this.minutesPerInterval === 60)
+            return 100;
+        if (this.minutesPerInterval === 30)
+            return 50;
+        return 25;
+    }
     logError() {
@@ -322,4 +387,4 @@ console.error('The calendar is not yet initialized. Cannot resize events.');
 }
-const createResizePlugin = () => new ResizePluginImpl();
+const createResizePlugin = (minutesPerInterval = 15) => new ResizePluginImpl(minutesPerInterval);
 
 exports.createResizePlugin = createResizePlugin;

dist/core.d.ts

@@ -327,9 +327,9 @@ import { Signal } from "@preact/signals";
 interface ResizePlugin extends PluginBase {
-    createTimeGridEventResizer(calendarEvent: CalendarEventInternal, mouseDownEvent: MouseEvent, dayBoundariesDateTime: {
+    createTimeGridEventResizer(calendarEvent: CalendarEventInternal, updateCopy: (newCopy: CalendarEventInternal | undefined) => void, mouseDownEvent: MouseEvent, dayBoundariesDateTime: {
         start: string;
         end: string;
     }): void;
-    createDateGridEventResizer(calendarEvent: CalendarEventInternal, mouseDownEvent: MouseEvent): void;
+    createDateGridEventResizer(calendarEvent: CalendarEventInternal, updateCopy: (newCopy: CalendarEventInternal | undefined) => void, mouseDownEvent: MouseEvent): void;
 }
-declare const createResizePlugin: () => ResizePlugin;
+declare const createResizePlugin: (minutesPerInterval?: number) => ResizePlugin;
 export { createResizePlugin };

dist/core.js

@@ -78,9 +78,12 @@ const getTimePointsPerPixel = ($app) => {
 
-const updateEventsList = ($app, calendarEvent, oldEventEnd, newEventEnd) => {
-    const rrule = calendarEvent._getForeignProperties().rrule;
-    calendarEvent.end = newEventEnd;
+const updateEventsList = ($app, eventCopy, oldEventEnd, newEventEnd) => {
+    const rrule = eventCopy._getForeignProperties().rrule;
     if (rrule && $app.config.plugins.eventRecurrence) {
-        $app.config.plugins.eventRecurrence.updateRecurrenceOnResize(calendarEvent.id, oldEventEnd, newEventEnd);
+        $app.config.plugins.eventRecurrence.updateRecurrenceOnResize(eventCopy.id, oldEventEnd, newEventEnd);
         return;
     }
+    const eventToUpdate = $app.calendarEvents.list.value.find((event) => event.id === eventCopy.id);
+    if (!eventToUpdate)
+        return;
+    eventToUpdate.end = eventCopy.end;
     $app.calendarEvents.list.value = [...$app.calendarEvents.list.value];
@@ -90,3 +93,3 @@ };
 class TimeGridEventResizer {
-    constructor($app, calendarEvent, initialY, CHANGE_THRESHOLD_IN_TIME_POINTS, dayBoundariesDateTime) {
+    constructor($app, eventCopy, updateCopy, initialY, CHANGE_THRESHOLD_IN_TIME_POINTS, dayBoundariesDateTime) {
         Object.defineProperty(this, "$app", {
@@ -98,8 +101,14 @@ enumerable: true,
         });
-        Object.defineProperty(this, "calendarEvent", {
+        Object.defineProperty(this, "eventCopy", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: calendarEvent
+            value: eventCopy
         });
+        Object.defineProperty(this, "updateCopy", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: updateCopy
+        });
         Object.defineProperty(this, "initialY", {
@@ -135,2 +144,8 @@ enumerable: true,
         });
+        Object.defineProperty(this, "lastValidEnd", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
         Object.defineProperty(this, "handleMouseMove", {
@@ -156,10 +171,19 @@ enumerable: true,
             value: () => {
+                this.setNewTimeForEventEnd(this.CHANGE_THRESHOLD_IN_TIME_POINTS * this.lastIntervalDiff);
+                updateEventsList(this.$app, this.eventCopy, this.originalEventEnd, this.lastValidEnd);
+                this.updateCopy(undefined);
+                this.$app.elements.calendarWrapper.classList.remove('sx__is-resizing');
                 this.$app.elements.calendarWrapper.removeEventListener('mousemove', this.handleMouseMove);
                 if (this.$app.config.callbacks.onEventUpdate) {
-                    this.$app.config.callbacks.onEventUpdate(this.calendarEvent._getExternalEvent());
+                    this.$app.config.callbacks.onEventUpdate(this.eventCopy._getExternalEvent());
                 }
             }
         });
+        this.originalEventEnd = this.eventCopy.end;
+        this.lastValidEnd = this.eventCopy.end;
+        const calendarWrapper = this.$app.elements.calendarWrapper;
+        if (!calendarWrapper)
+            return;
+        calendarWrapper.classList.add('sx__is-resizing');
         this.setupEventListeners();
-        this.originalEventEnd = this.calendarEvent.end;
     }
@@ -171,8 +195,9 @@ setupEventListeners() {
     setNewTimeForEventEnd(pointsToAdd) {
-        const endBeforeUpdate = this.calendarEvent.end;
         const newEnd = addTimePointsToDateTime(this.originalEventEnd, pointsToAdd);
         if (newEnd > this.dayBoundariesDateTime.end ||
-            newEnd <= this.calendarEvent.start)
+            newEnd <= this.eventCopy.start)
             return;
-        updateEventsList(this.$app, this.calendarEvent, endBeforeUpdate, newEnd);
+        this.lastValidEnd = newEnd;
+        this.eventCopy.end = this.lastValidEnd;
+        this.updateCopy(this.eventCopy);
     }
@@ -207,3 +232,3 @@ }
 class DateGridEventResizer {
-    constructor($app, calendarEvent, initialX) {
+    constructor($app, eventCopy, updateCopy, initialX) {
         Object.defineProperty(this, "$app", {
@@ -215,8 +240,14 @@ enumerable: true,
         });
-        Object.defineProperty(this, "calendarEvent", {
+        Object.defineProperty(this, "eventCopy", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: calendarEvent
+            value: eventCopy
         });
+        Object.defineProperty(this, "updateCopy", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: updateCopy
+        });
         Object.defineProperty(this, "initialX", {
@@ -232,3 +263,3 @@ enumerable: true,
             writable: true,
-            value: void 0
+            value: 0
         });
@@ -241,2 +272,14 @@ Object.defineProperty(this, "originalEventEnd", {
         });
+        Object.defineProperty(this, "ORIGINAL_NDAYS", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "lastNDaysDiff", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
         Object.defineProperty(this, "handleMouseMove", {
@@ -248,4 +291,4 @@ enumerable: true,
                 const xDifference = event.clientX - this.initialX;
-                const daysToAdd = Math.floor(xDifference / this.dayWidth);
-                this.setNewTimeForEventEnd(daysToAdd);
+                this.lastNDaysDiff = Math.floor(xDifference / this.dayWidth);
+                this.setNewTimeForEventEnd();
             }
@@ -258,11 +301,19 @@ });
             value: () => {
+                updateEventsList(this.$app, this.eventCopy, this.originalEventEnd, this.eventCopy.end);
+                this.updateCopy(undefined);
+                this.$app.elements.calendarWrapper.classList.remove('sx__is-resizing');
                 this.$app.elements.calendarWrapper.removeEventListener('mousemove', this.handleMouseMove);
                 if (this.$app.config.callbacks.onEventUpdate) {
-                    this.$app.config.callbacks.onEventUpdate(this.calendarEvent._getExternalEvent());
+                    this.$app.config.callbacks.onEventUpdate(this.eventCopy._getExternalEvent());
                 }
             }
         });
+        this.originalEventEnd = eventCopy.end;
+        this.ORIGINAL_NDAYS = eventCopy._nDaysInGrid || 0;
+        const calendarWrapper = this.$app.elements.calendarWrapper;
+        if (!calendarWrapper)
+            return;
+        calendarWrapper.classList.add('sx__is-resizing');
+        this.dayWidth = getTimeGridDayWidth(this.$app);
         this.setupEventListeners();
-        this.originalEventEnd = calendarEvent.end;
-        this.dayWidth = getTimeGridDayWidth(this.$app);
     }
@@ -273,11 +324,12 @@ setupEventListeners() {
     }
-    setNewTimeForEventEnd(daysToAdd) {
-        const endBeforeUpdate = this.calendarEvent.end;
-        const newEnd = addDays(this.originalEventEnd, daysToAdd);
+    setNewTimeForEventEnd() {
+        const newEnd = addDays(this.originalEventEnd, this.lastNDaysDiff);
         if (newEnd > this.$app.calendarState.range.value.end ||
-            newEnd < this.calendarEvent.start ||
+            newEnd < this.eventCopy.start ||
             newEnd <
                 toDateString(toJSDate(this.$app.calendarState.range.value.start)))
             return;
-        updateEventsList(this.$app, this.calendarEvent, endBeforeUpdate, newEnd);
+        this.eventCopy.end = newEnd;
+        this.eventCopy._nDaysInGrid = this.ORIGINAL_NDAYS + this.lastNDaysDiff;
+        this.updateCopy(this.eventCopy);
     }
@@ -287,3 +339,9 @@ }
 class ResizePluginImpl {
-    constructor() {
+    constructor(minutesPerInterval) {
+        Object.defineProperty(this, "minutesPerInterval", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: minutesPerInterval
+        });
         Object.defineProperty(this, "name", {
@@ -305,12 +363,19 @@ enumerable: true,
     }
-    createTimeGridEventResizer(calendarEvent, mouseDownEvent, dayBoundariesDateTime) {
+    createTimeGridEventResizer(calendarEvent, updateCopy, mouseDownEvent, dayBoundariesDateTime) {
         if (!this.$app)
             return this.logError();
-        new TimeGridEventResizer(this.$app, calendarEvent, mouseDownEvent.clientY, 25, dayBoundariesDateTime);
+        new TimeGridEventResizer(this.$app, calendarEvent, updateCopy, mouseDownEvent.clientY, this.getTimePointsForIntervalConfig(), dayBoundariesDateTime);
     }
-    createDateGridEventResizer(calendarEvent, mouseDownEvent) {
+    createDateGridEventResizer(calendarEvent, updateCopy, mouseDownEvent) {
         if (!this.$app)
             return this.logError();
-        new DateGridEventResizer(this.$app, calendarEvent, mouseDownEvent.clientX);
+        new DateGridEventResizer(this.$app, calendarEvent, updateCopy, mouseDownEvent.clientX);
     }
+    getTimePointsForIntervalConfig() {
+        if (this.minutesPerInterval === 60)
+            return 100;
+        if (this.minutesPerInterval === 30)
+            return 50;
+        return 25;
+    }
     logError() {
@@ -320,4 +385,4 @@ console.error('The calendar is not yet initialized. Cannot resize events.');
 }
-const createResizePlugin = () => new ResizePluginImpl();
+const createResizePlugin = (minutesPerInterval = 15) => new ResizePluginImpl(minutesPerInterval);
 
 export { createResizePlugin };

dist/core.umd.d.ts

@@ -327,9 +327,9 @@ import { Signal } from "@preact/signals";
 interface ResizePlugin extends PluginBase {
-    createTimeGridEventResizer(calendarEvent: CalendarEventInternal, mouseDownEvent: MouseEvent, dayBoundariesDateTime: {
+    createTimeGridEventResizer(calendarEvent: CalendarEventInternal, updateCopy: (newCopy: CalendarEventInternal | undefined) => void, mouseDownEvent: MouseEvent, dayBoundariesDateTime: {
         start: string;
         end: string;
     }): void;
-    createDateGridEventResizer(calendarEvent: CalendarEventInternal, mouseDownEvent: MouseEvent): void;
+    createDateGridEventResizer(calendarEvent: CalendarEventInternal, updateCopy: (newCopy: CalendarEventInternal | undefined) => void, mouseDownEvent: MouseEvent): void;
 }
-declare const createResizePlugin: () => ResizePlugin;
+declare const createResizePlugin: (minutesPerInterval?: number) => ResizePlugin;
 export { createResizePlugin };

dist/core.umd.js

@@ -84,9 +84,12 @@ (function (global, factory) {
 
-  const updateEventsList = ($app, calendarEvent, oldEventEnd, newEventEnd) => {
-      const rrule = calendarEvent._getForeignProperties().rrule;
-      calendarEvent.end = newEventEnd;
+  const updateEventsList = ($app, eventCopy, oldEventEnd, newEventEnd) => {
+      const rrule = eventCopy._getForeignProperties().rrule;
       if (rrule && $app.config.plugins.eventRecurrence) {
-          $app.config.plugins.eventRecurrence.updateRecurrenceOnResize(calendarEvent.id, oldEventEnd, newEventEnd);
+          $app.config.plugins.eventRecurrence.updateRecurrenceOnResize(eventCopy.id, oldEventEnd, newEventEnd);
           return;
       }
+      const eventToUpdate = $app.calendarEvents.list.value.find((event) => event.id === eventCopy.id);
+      if (!eventToUpdate)
+          return;
+      eventToUpdate.end = eventCopy.end;
       $app.calendarEvents.list.value = [...$app.calendarEvents.list.value];
@@ -96,3 +99,3 @@ };
   class TimeGridEventResizer {
-      constructor($app, calendarEvent, initialY, CHANGE_THRESHOLD_IN_TIME_POINTS, dayBoundariesDateTime) {
+      constructor($app, eventCopy, updateCopy, initialY, CHANGE_THRESHOLD_IN_TIME_POINTS, dayBoundariesDateTime) {
           Object.defineProperty(this, "$app", {
@@ -104,8 +107,14 @@ enumerable: true,
           });
-          Object.defineProperty(this, "calendarEvent", {
+          Object.defineProperty(this, "eventCopy", {
               enumerable: true,
               configurable: true,
               writable: true,
-              value: calendarEvent
+              value: eventCopy
           });
+          Object.defineProperty(this, "updateCopy", {
+              enumerable: true,
+              configurable: true,
+              writable: true,
+              value: updateCopy
+          });
           Object.defineProperty(this, "initialY", {
@@ -141,2 +150,8 @@ enumerable: true,
           });
+          Object.defineProperty(this, "lastValidEnd", {
+              enumerable: true,
+              configurable: true,
+              writable: true,
+              value: ''
+          });
           Object.defineProperty(this, "handleMouseMove", {
@@ -162,10 +177,19 @@ enumerable: true,
               value: () => {
+                  this.setNewTimeForEventEnd(this.CHANGE_THRESHOLD_IN_TIME_POINTS * this.lastIntervalDiff);
+                  updateEventsList(this.$app, this.eventCopy, this.originalEventEnd, this.lastValidEnd);
+                  this.updateCopy(undefined);
+                  this.$app.elements.calendarWrapper.classList.remove('sx__is-resizing');
                   this.$app.elements.calendarWrapper.removeEventListener('mousemove', this.handleMouseMove);
                   if (this.$app.config.callbacks.onEventUpdate) {
-                      this.$app.config.callbacks.onEventUpdate(this.calendarEvent._getExternalEvent());
+                      this.$app.config.callbacks.onEventUpdate(this.eventCopy._getExternalEvent());
                   }
               }
           });
+          this.originalEventEnd = this.eventCopy.end;
+          this.lastValidEnd = this.eventCopy.end;
+          const calendarWrapper = this.$app.elements.calendarWrapper;
+          if (!calendarWrapper)
+              return;
+          calendarWrapper.classList.add('sx__is-resizing');
           this.setupEventListeners();
-          this.originalEventEnd = this.calendarEvent.end;
       }
@@ -177,8 +201,9 @@ setupEventListeners() {
       setNewTimeForEventEnd(pointsToAdd) {
-          const endBeforeUpdate = this.calendarEvent.end;
           const newEnd = addTimePointsToDateTime(this.originalEventEnd, pointsToAdd);
           if (newEnd > this.dayBoundariesDateTime.end ||
-              newEnd <= this.calendarEvent.start)
+              newEnd <= this.eventCopy.start)
               return;
-          updateEventsList(this.$app, this.calendarEvent, endBeforeUpdate, newEnd);
+          this.lastValidEnd = newEnd;
+          this.eventCopy.end = this.lastValidEnd;
+          this.updateCopy(this.eventCopy);
       }
@@ -213,3 +238,3 @@ }
   class DateGridEventResizer {
-      constructor($app, calendarEvent, initialX) {
+      constructor($app, eventCopy, updateCopy, initialX) {
           Object.defineProperty(this, "$app", {
@@ -221,8 +246,14 @@ enumerable: true,
           });
-          Object.defineProperty(this, "calendarEvent", {
+          Object.defineProperty(this, "eventCopy", {
               enumerable: true,
               configurable: true,
               writable: true,
-              value: calendarEvent
+              value: eventCopy
           });
+          Object.defineProperty(this, "updateCopy", {
+              enumerable: true,
+              configurable: true,
+              writable: true,
+              value: updateCopy
+          });
           Object.defineProperty(this, "initialX", {
@@ -238,3 +269,3 @@ enumerable: true,
               writable: true,
-              value: void 0
+              value: 0
           });
@@ -247,2 +278,14 @@ Object.defineProperty(this, "originalEventEnd", {
           });
+          Object.defineProperty(this, "ORIGINAL_NDAYS", {
+              enumerable: true,
+              configurable: true,
+              writable: true,
+              value: void 0
+          });
+          Object.defineProperty(this, "lastNDaysDiff", {
+              enumerable: true,
+              configurable: true,
+              writable: true,
+              value: 0
+          });
           Object.defineProperty(this, "handleMouseMove", {
@@ -254,4 +297,4 @@ enumerable: true,
                   const xDifference = event.clientX - this.initialX;
-                  const daysToAdd = Math.floor(xDifference / this.dayWidth);
-                  this.setNewTimeForEventEnd(daysToAdd);
+                  this.lastNDaysDiff = Math.floor(xDifference / this.dayWidth);
+                  this.setNewTimeForEventEnd();
               }
@@ -264,11 +307,19 @@ });
               value: () => {
+                  updateEventsList(this.$app, this.eventCopy, this.originalEventEnd, this.eventCopy.end);
+                  this.updateCopy(undefined);
+                  this.$app.elements.calendarWrapper.classList.remove('sx__is-resizing');
                   this.$app.elements.calendarWrapper.removeEventListener('mousemove', this.handleMouseMove);
                   if (this.$app.config.callbacks.onEventUpdate) {
-                      this.$app.config.callbacks.onEventUpdate(this.calendarEvent._getExternalEvent());
+                      this.$app.config.callbacks.onEventUpdate(this.eventCopy._getExternalEvent());
                   }
               }
           });
+          this.originalEventEnd = eventCopy.end;
+          this.ORIGINAL_NDAYS = eventCopy._nDaysInGrid || 0;
+          const calendarWrapper = this.$app.elements.calendarWrapper;
+          if (!calendarWrapper)
+              return;
+          calendarWrapper.classList.add('sx__is-resizing');
+          this.dayWidth = getTimeGridDayWidth(this.$app);
           this.setupEventListeners();
-          this.originalEventEnd = calendarEvent.end;
-          this.dayWidth = getTimeGridDayWidth(this.$app);
       }
@@ -279,11 +330,12 @@ setupEventListeners() {
       }
-      setNewTimeForEventEnd(daysToAdd) {
-          const endBeforeUpdate = this.calendarEvent.end;
-          const newEnd = addDays(this.originalEventEnd, daysToAdd);
+      setNewTimeForEventEnd() {
+          const newEnd = addDays(this.originalEventEnd, this.lastNDaysDiff);
           if (newEnd > this.$app.calendarState.range.value.end ||
-              newEnd < this.calendarEvent.start ||
+              newEnd < this.eventCopy.start ||
               newEnd <
                   toDateString(toJSDate(this.$app.calendarState.range.value.start)))
               return;
-          updateEventsList(this.$app, this.calendarEvent, endBeforeUpdate, newEnd);
+          this.eventCopy.end = newEnd;
+          this.eventCopy._nDaysInGrid = this.ORIGINAL_NDAYS + this.lastNDaysDiff;
+          this.updateCopy(this.eventCopy);
       }
@@ -293,3 +345,9 @@ }
   class ResizePluginImpl {
-      constructor() {
+      constructor(minutesPerInterval) {
+          Object.defineProperty(this, "minutesPerInterval", {
+              enumerable: true,
+              configurable: true,
+              writable: true,
+              value: minutesPerInterval
+          });
           Object.defineProperty(this, "name", {
@@ -311,12 +369,19 @@ enumerable: true,
       }
-      createTimeGridEventResizer(calendarEvent, mouseDownEvent, dayBoundariesDateTime) {
+      createTimeGridEventResizer(calendarEvent, updateCopy, mouseDownEvent, dayBoundariesDateTime) {
           if (!this.$app)
               return this.logError();
-          new TimeGridEventResizer(this.$app, calendarEvent, mouseDownEvent.clientY, 25, dayBoundariesDateTime);
+          new TimeGridEventResizer(this.$app, calendarEvent, updateCopy, mouseDownEvent.clientY, this.getTimePointsForIntervalConfig(), dayBoundariesDateTime);
       }
-      createDateGridEventResizer(calendarEvent, mouseDownEvent) {
+      createDateGridEventResizer(calendarEvent, updateCopy, mouseDownEvent) {
           if (!this.$app)
               return this.logError();
-          new DateGridEventResizer(this.$app, calendarEvent, mouseDownEvent.clientX);
+          new DateGridEventResizer(this.$app, calendarEvent, updateCopy, mouseDownEvent.clientX);
       }
+      getTimePointsForIntervalConfig() {
+          if (this.minutesPerInterval === 60)
+              return 100;
+          if (this.minutesPerInterval === 30)
+              return 50;
+          return 25;
+      }
       logError() {
@@ -326,3 +391,3 @@ console.error('The calendar is not yet initialized. Cannot resize events.');
   }
-  const createResizePlugin = () => new ResizePluginImpl();
+  const createResizePlugin = (minutesPerInterval = 15) => new ResizePluginImpl(minutesPerInterval);
 
@@ -329,0 +394,0 @@ exports.createResizePlugin = createResizePlugin;

package.json

 {
   "name": "@schedule-x/resize",
-  "version": "1.34.0",
+  "version": "1.35.0",
   "description": "Resize events in the Schedule-X calendar",
@@ -29,3 +29,3 @@ "author": {
   "homepage": "https://schedule-x.dev",
-  "gitHead": "3c7b1e48da5011fc6101d2f72b052a9fadf4e6e3"
+  "gitHead": "343edac9d2dac408c39bbc706ba6dedc9ee8fa44"
 }

No alert changes

Improved metrics

Total package byte prevSize

91067

increased by13.68%

Lines of code

2438

increased by11.94%

No dependency changes