DayPilot.Calendar.onEventResizing

The onEventResizing event handler fires during event resizing in the JavaScript Calendar component, on every target position change. You can use it to customize the resizing shadow and enforce business rules. See also event resizing customization.

Declaration

DayPilot.Calendar.onEventResizing(args)

Parameters

• args.e (DayPilot.Event) - object representing the item being resized (read-only)

• args.start (DayPilot.Date) - start of the target position; since 2024.2.5922 the value can be modified

• args.end (DayPilot.Date) - end of the target position; since 2024.2.5922 the value can be modified

• args.resource (string | number) - current resource ID (read-only)

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

• args.cssClass (string) - CSS class applied to the target shadow

• args.allowed (boolean) - enables or disables resizing at the current target position

• args.anchor (DayPilot.Date) - fixed edge that is not being resized (available since 2023.4.5770)

• args.top.width (number) - width of the top label; use null for automatic width

• args.top.space (number) - distance of the top label from the shadow in pixels

• args.top.html (string) - HTML of the top label

• args.top.enabled (boolean) - enables or disables the top label

• args.bottom.width (number) - width of the bottom label; use null for automatic width

• args.bottom.space (number) - distance of the bottom label from the shadow in pixels

• args.bottom.html (string) - HTML of the bottom label

• args.bottom.enabled (boolean) - enables or disables the bottom label

Notes

The handler runs continuously while the resize shadow is moving. You can reject a target position by setting args.allowed to false, and you can update args.start, args.end, args.html, args.cssClass, and the top or bottom labels to change the live preview.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  onEventResizing: (args) => {
    args.top.enabled = true;
    args.top.html = "Duration: " + new DayPilot.Duration(args.start, args.end).totalHours() + " hours";
  },
  // ...
});
calendar.init();

Angular

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

config: DayPilot.CalendarConfig = {
  onEventResizing: (args) => {
    args.top.enabled = true;
    args.top.html = "Duration: " + new DayPilot.Duration(args.start, args.end).totalHours() + " hours";
  },
  // ...
};

React

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

const onEventResizing = (args) => {
  args.top.enabled = true;
  args.top.html = "Duration: " + new DayPilot.Duration(args.start, args.end).totalHours() + " hours";
};

Vue

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

const onEventResizing = (args) => {
  args.top.enabled = true;
  args.top.html = "Duration: " + new DayPilot.Duration(args.start, args.end).totalHours() + " hours";
};

See Also

Event Resizing [doc.daypilot.org]

Event Resizing Customization [doc.daypilot.org]

DayPilot.Calendar.eventResizeHandling

DayPilot.Calendar.onEventResize

DayPilot.Calendar.onEventResized

DayPilot.Calendar Class