DayPilot.Scheduler.onTimeRangeSelect

The onTimeRangeSelect event handler fires when the user completes a date/time range selection using drag and drop in the JavaScript Scheduler component, before the default action configured by timeRangeSelectedHandling is performed.

Declaration

DayPilot.Scheduler.onTimeRangeSelect(args)

Parameters

• args.start (DayPilot.Date) - start of the selection

• args.end (DayPilot.Date) - end of the selection

• args.multirange (array) - existing selections when multi-range selection is enabled; each item includes start, end, and resource

• args.origin ("click" | "drag" | "api" | "keyboard") - origin of the event; "click" is used if the user clicks a grid cell without dragging; available since 2023.4.5803

• args.resource (string | number) - selection resource id

• args.alt (boolean) - Alt key pressed status (since 2026.2.6910)

• args.ctrl (boolean) - Ctrl key pressed status (since 2026.2.6910)

• args.shift (boolean) - Shift key pressed status (since 2026.2.6910)

• args.meta (boolean) - Meta key pressed status (since 2026.2.6910)

• args.preventDefault() - cancels the default action and prevents DayPilot.Scheduler.onTimeRangeSelected from firing

Notes

While the user is changing the selection, the component fires DayPilot.Scheduler.onTimeRangeSelecting whenever the selected range changes.

Not available in api=1 mode.

Examples

JavaScript

const dp = new DayPilot.Scheduler("dp", {
  timeRangeSelectedHandling: "Enabled",
  onTimeRangeSelect: (args) => {
    if (args.start.getDayOfWeek() === 0 || args.start.getDayOfWeek() === 6) {
      args.preventDefault();
    }
  },
  // ...
});
dp.init();

Angular

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

config: DayPilot.SchedulerConfig = {
  timeRangeSelectedHandling: "Enabled",
  onTimeRangeSelect: (args) => {
    if (args.start.getDayOfWeek() === 0 || args.start.getDayOfWeek() === 6) {
      args.preventDefault();
    }
  },
  // ...
};

React

<DayPilotScheduler
  timeRangeSelectedHandling="Enabled"
  onTimeRangeSelect={onTimeRangeSelect}
  {/* ... */}
/>

const onTimeRangeSelect = (args) => {
  if (args.start.getDayOfWeek() === 0 || args.start.getDayOfWeek() === 6) {
    args.preventDefault();
  }
};

Vue

<DayPilotScheduler
  timeRangeSelectedHandling="Enabled"
  @timeRangeSelect="onTimeRangeSelect"
  <!-- ... -->
/>

const onTimeRangeSelect = (args) => {
  if (args.start.getDayOfWeek() === 0 || args.start.getDayOfWeek() === 6) {
    args.preventDefault();
  }
};

See Also

Event Creation [doc.daypilot.org]

DayPilot.Scheduler.onTimeRangeSelected

DayPilot.Scheduler.onTimeRangeSelecting

DayPilot.Scheduler.timeRangeSelectedHandling

DayPilot.Scheduler Class