DayPilot.Scheduler.onTimeRangeSelecting

The onTimeRangeSelecting event handler fires in real time during drag & drop time range selecting in the JavaScript Scheduler component.

Declaration

DayPilot.Scheduler.onTimeRangeSelecting(args)

Parameters

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

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

• args.cssClass (string) - custom CSS class for the selection

• args.duration (DayPilot.Duration) - current selection duration (read-only)

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

• args.html (string) - custom HTML content displayed with the selection

• args.ignoreDisabledCells (boolean) - re-enables a selection that has been blocked because it overlaps disabled cells; available since 2021.3.5034

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

• args.left.enabled (boolean) - displays the inline start indicator; the default value is calendar.eventMovingStartEndEnabled

• args.multirange (array) - existing selections created when multi-range selection is enabled; available since 2025.3.6611

• args.overlapping (boolean) - indicates overlap with existing events (read-only)

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

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

• args.right.enabled (boolean) - displays the inline end indicator; the default value is calendar.eventMovingStartEndEnabled

• args.row (DayPilot.Row) - resource row object; available since 2018.4.3506 (read-only)

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

Notes

You can use onTimeRangeSelecting to display live feedback, enforce a minimum or maximum selection duration, forbid selection for certain dates such as weekends, or block selection for selected resources. The JavaScript Scheduler component raises the event repeatedly whenever the selection changes.

The JavaScript Scheduler: Limit Time Range Selection (Min/Max) tutorial shows how to validate the selection duration while the drag operation is still in progress.

Examples

JavaScript

External message

const scheduler = new DayPilot.Scheduler("dp", {
  onTimeRangeSelecting: (args) => {
    const message = document.getElementById("msg");
    if (message) {
      message.textContent = `${args.start} ${args.end} ${args.resource}`;
    }
  },
  // ...
});
scheduler.init();

Inline message

const scheduler = new DayPilot.Scheduler("dp", {
  onTimeRangeSelecting: (args) => {
    if (args.duration.totalHours() > 4) {
      args.right.enabled = true;
      args.right.html = "You can only book up to 4 hours";
      args.allowed = false;
    }
  },
  // ...
});
scheduler.init();

Angular

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

config: DayPilot.SchedulerConfig = {
  onTimeRangeSelecting: (args) => {
    if (args.duration.totalHours() > 4) {
      args.right.enabled = true;
      args.right.html = "You can only book up to 4 hours";
      args.allowed = false;
    }
  },
  // ...
};

React

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

const onTimeRangeSelecting = (args) => {
  if (args.duration.totalHours() > 4) {
    args.right.enabled = true;
    args.right.html = "You can only book up to 4 hours";
    args.allowed = false;
  }
};

Vue

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

const onTimeRangeSelecting = (args) => {
  if (args.duration.totalHours() > 4) {
    args.right.enabled = true;
    args.right.html = "You can only book up to 4 hours";
    args.allowed = false;
  }
};

See Also

Time Range Selecting [doc.daypilot.org]

JavaScript Scheduler: Limit Time Range Selection (Min/Max) [code.daypilot.org]

DayPilot.Scheduler.onTimeRangeSelected

DayPilot.Scheduler Class