DayPilot.Calendar.onTimeRangeSelecting

The onTimeRangeSelecting event handler fires during time range selecting in the JavaScript Calendar component, on every target position change. You can use it to control the selection shadow appearance and implement custom business rules.

Declaration

DayPilot.Calendar.onTimeRangeSelecting(args)

Parameters

• args.anchor (DayPilot.Date) - fixed-edge timestamp of the selection, the one not being resized (since 2023.1.5536)

• args.e (DayPilot.Event) - associated item reference (read-only)

• args.start (DayPilot.Date) - current shadow start; since 2023.1.5536 the value can be modified

• args.end (DayPilot.Date) - current shadow end; since 2023.1.5536 the value can be modified

• args.duration (DayPilot.Duration) - current selection length

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

• args.html (string) - shadow HTML

• args.cssClass (string) - shadow CSS class

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

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

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

• args.top.html (string) - top HTML

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

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

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

• args.bottom.html (string) - bottom HTML

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

Notes

The handler runs continuously while the user changes the selection target. You can update args.start, args.end, args.html, args.cssClass, and the top or bottom labels to customize the live preview, or set args.allowed to false to reject the current target position.

Examples

JavaScript

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

Angular

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

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

React

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

const onTimeRangeSelecting = (args) => {
  args.top.enabled = true;
  args.top.html = "Duration: " + args.duration.totalHours() + " hours";
};

Vue

<DayPilotCalendar
  @timeRangeSelecting="onTimeRangeSelecting"
  <!-- ... -->
/>

const onTimeRangeSelecting = (args) => {
  args.top.enabled = true;
  args.top.html = "Duration: " + args.duration.totalHours() + " hours";
};

See Also

Time Range Selecting [doc.daypilot.org]

DayPilot.Calendar.onTimeRangeSelected

DayPilot.Calendar Class