DayPilot.Scheduler.onEventResizing

The onEventResizing event handler fires whenever the event shadow changes size during drag & drop event resizing in the JavaScript Scheduler, allowing you to customize the shadow in real time.

Declaration

DayPilot.Scheduler.onEventResizing(args)

Parameters

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

• args.allowed (boolean) - set to false to forbid the operation

• args.alt (boolean) - true if Alt is pressed (read-only)

• args.anchor (DayPilot.Date) - fixed edge of the shadow, the side that is not being resized

• args.cssClass (string) - CSS class added to the resizing shadow

• args.ctrl (boolean) - true if Ctrl is pressed (read-only)

• args.duration (DayPilot.Duration) - current shadow span

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

• args.end (DayPilot.Date) - current shadow end

• args.html (string) - HTML content of the shadow

• args.left (object) - inline start indicator settings (see below)

• args.meta (boolean) - true if Meta is pressed (read-only)

• args.multiresize (array) - additional events being resized; each item contains start, end, and event

• args.right (object) - inline end indicator settings (see below)

• args.row (DayPilot.Row) - resource line (since 2018.4.3506)

• args.shift (boolean) - true if Shift is pressed (read-only)

• args.start (DayPilot.Date) - current shadow start

• args.what ("start" | "end") - what was resized (since 2019.2.3823)

Start indicator (args.left):

• html (string) - HTML of the inline start indicator; default value is set to args.start.toString(calendar.eventMovingStartEndFormat)

• enabled (boolean) - when set to true, the inline start indicator is displayed; default value is set to calendar.eventMovingStartEndEnabled

• space (number) - space between the shadow and the left indicator, in pixels

• width (number) - indicator width in pixels; if not specified, auto width will be used

End indicator (args.right):

• html (string) - HTML of the inline end indicator; default value is set to args.start.toString(calendar.eventMovingStartEndFormat)

• enabled (boolean) - when set to true, the inline end indicator is displayed; default value is set to calendar.eventMovingStartEndEnabled

• space (number) - space between the shadow and the right indicator, in pixels

• width (number) - indicator width in pixels; if not specified, auto width will be used

Notes

You can adjust the shadow start and end inside the event handler by modifying args.start, args.end, args.multiresize[].start, and args.multiresize[].end.

Set args.allowed to false when you want to keep the live feedback visible but block the resize from being completed.

Examples

JavaScript

External message:

const dp = new DayPilot.Scheduler("dp", {
  onEventResizing: (args) => {
    document.getElementById("msg").textContent = args.start + " " + args.end + " " + args.duration;
  },
  // ...
});
dp.init();

Inline message:

const dp = new DayPilot.Scheduler("dp", {
  onEventResizing: (args) => {
    if (args.duration.totalHours() > 4) {
      args.left.enabled = false;
      args.right.enabled = true;
      args.right.html = "The event cannot take more than 4 hours";
      args.allowed = false;
    }
  },
  // ...
});
dp.init();

Angular

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

config: DayPilot.SchedulerConfig = {
  onEventResizing: (args) => {
    if (args.duration.totalHours() > 4) {
      args.left.enabled = false;
      args.right.enabled = true;
      args.right.html = "The event cannot take more than 4 hours";
      args.allowed = false;
    }
  },
  // ...
};

React

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

const onEventResizing = (args) => {
  if (args.duration.totalHours() > 4) {
    args.left.enabled = false;
    args.right.enabled = true;
    args.right.html = "The event cannot take more than 4 hours";
    args.allowed = false;
  }
};

Vue

<DayPilotScheduler
  @eventResizing="onEventResizing"
  <!-- ... -->
/>

const onEventResizing = (args) => {
  if (args.duration.totalHours() > 4) {
    args.left.enabled = false;
    args.right.enabled = true;
    args.right.html = "The event cannot take more than 4 hours";
    args.allowed = false;
  }
};

See Also

Drag & Drop Event Resizing [doc.daypilot.org]

DayPilot.Scheduler Class