DayPilot.Scheduler.onEventResize

The onEventResize event handler fires when the user finishes drag and drop event resizing (on drop) but before the default action configured by DayPilot.Scheduler.eventResizeHandling is performed.

Declaration

DayPilot.Scheduler.onEventResize(args)

Parameters

• args.areaData - value of the data property of the active area that was used as the drag handle (available since 2023.4.5811)

• args.control (DayPilot.Scheduler) - control instance

• args.async (boolean) - enables asynchronous processing of the default action

• args.e (DayPilot.Event) - object being resized

• args.loaded() - continues processing when asynchronous update is enabled

• args.multiresize - array of additional events resized during multi-resizing (Pro only in JavaScript Lite)

• args.newStart (DayPilot.Date) - new event start

• args.newEnd (DayPilot.Date) - new event end

• args.what ("start" | "end") - which edge is being resized (available since 2019.2.3823)

• args.preventDefault() - terminates further processing; the default action and DayPilot.Scheduler.onEventResized will not be called

Notes

You can cancel the default action synchronously using args.preventDefault() when the resize does not meet your business rules.

For asynchronous validation, set args.async = true. The default action will only be performed after you call args.loaded(). You may want to use DayPilot.Scheduler.blockOnCallBack to disable the UI while the Scheduler is waiting for the response.

Each item in args.multiresize includes the resized event, start, and end values for one of the affected events.

In api=1 mode, the legacy signature is onEventResize(e, newStart, newEnd). In that mode, this event is only called when DayPilot.Scheduler.eventResizeHandling is set to "JavaScript".

Examples

JavaScript

Simple synchronous validation:

const dp = new DayPilot.Scheduler("dp", {
  onEventResize: (args) => {
    if (args.e.id() === "3") {
      args.preventDefault();
      args.control.message("Event 3 cannot be resized.");
    }
  },
  // ...
});
dp.init();

Asynchronous validation:

const dp = new DayPilot.Scheduler("dp", {
  onEventResize: async (args) => {
    args.async = true;
    args.control.message("Checking...");

    try {
      const response = await fetch("/api/validateResize?" + new URLSearchParams({
        dateFrom: args.newStart.toString(),
        dateTo: args.newEnd.toString(),
        id: args.e.id()
      }));
      const result = await response.json();

      if (result.error) {
        args.control.message(result.message);
        args.preventDefault();
      }
    }
    finally {
      args.loaded();
    }
  },
  // ...
});
dp.init();

Angular

<daypilot-scheduler [config]="config"></daypilot-scheduler>

config: DayPilot.SchedulerConfig = {
  onEventResize: (args) => {
    if (args.e.id() === "3") {
      args.preventDefault();
      args.control.message("Event 3 cannot be resized.");
    }
  },
  // ...
};

React

<DayPilotScheduler
  onEventResize={onEventResize}
  {/* ... */}
/>

const onEventResize = (args) => {
  if (args.e.id() === "3") {
    args.preventDefault();
    args.control.message("Event 3 cannot be resized.");
  }
};

Vue

<DayPilotScheduler
  @eventResize="onEventResize"
  <!-- ... -->
/>

const onEventResize = (args) => {
  if (args.e.id() === "3") {
    args.preventDefault();
    args.control.message("Event 3 cannot be resized.");
  }
};

See Also

Event Resizing [doc.daypilot.org]

DayPilot.Scheduler.onEventResizing

DayPilot.Scheduler.onEventResized

DayPilot.Scheduler.eventResizeHandling

DayPilot.Scheduler Class