DayPilot.Scheduler.onTimeRangeSelecting

The onTimeRangeSelecting event is fired in real time during drag & drop time range selecting.

You can use onTimeRangeSelecting to customize the range selection behavior - display live feedback, enforce minimum/maximum duration of the selection (see the JavaScript Scheduler: Limit Time Range Selection (Min/Max) tutorial), forbid selection for certain dates (e.g. weekends) or for certain resources.

The JavaScript Scheduler component fires the onTimeRangeSelecting event repeatedly, whenever the duration changes.

Declaration

DayPilot.Scheduler.onTimeRangeSelecting(args);

Parameters

• args.allowed (boolean) - set to false to forbid this selection 
• args.anchor (DayPilot.Date object) - date/time of the fixed edge  - the one not being resized
• args.cssClass (string) - allows setting custom CSS class 
• args.duration (DayPilot.Duration object) - duration of the selectio; read-only
• args.end (DayPilot.Date object) - end date/time of the current position
• args.html (string) - allows setting custom HTML content 
• args.ignoreDisabledCells (boolean) - re-enables selection that has been forbidden because of overlap with disabled cells; available since 2021.3.5034
• args.left.html (string) - HTML of the inline start indicator; default value is set to args.start.toString(calendar.eventMovingStartEndFormat)
• args.left.enabled (boolean) - when set to true, the inline start indicator is displayed; default value is set to calendar.eventMovingStartEndEnabled
• args.overlapping (boolean) - indicates an overlap of the current selection with existing events; read-only
• args.resource (string | number) - id of the resource; read-only
• args.right.html (string) - HTML of the inline end indicator; default value is set to args.start.toString(calendar.eventMovingStartEndFormat)
• args.right.enabled (boolean) - when set to true, the inline end indicator is displayed; default value is set to calendar.eventMovingStartEndEnabled
• args.row (DayPilot.Row object) - row (since version 2018.4.3506); read-only
• args.start (DayPilot.Date object) - start date/time of the current selection 

Example

External message

dp.onTimeRangeSelecting = function(args) {
  $("#msg").html(args.start + " " + args.end + " " + args.resource);
};

Inline message

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