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.
DayPilot.Scheduler.onTimeRangeSelecting(args);
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.multirange
(array) - array of existing selections created when multi-range selection is enabeld (available since 2025.3.6611)
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
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;
}
};