The onTimeRangeSelecting event is fired by the JavaScript Calendar component during time range selecting, on every target position change. You can use it to control the time range shadow appearance and implement custom business rules.
Declaration
DayPilot.Calendar.onTimeRangeSelecting(args)
Parameters
- args.anchor (DayPilot.Date object) - date/time of the fixed edge - the one not being resized (since 2023.1.5536)
- args.e (DayPilot.Event object) - event [read-only]
- args.start (DayPilot.Date) - current shadow start; since 2023.1.5536 the value can be modified
- args.end (DayPilot.Date) - current shadow start; since 2023.1.5536 the value can be modified
- args.duration (DayPilot.Duration) - duration of the selection
- args.resource (string | number) - current resource id [read-only]
- args.html (string) - shadow HTML
- args.cssClass (string) - shadow CSS class
- args.allowed (boolean) - enabled/disable drop at this position
- args.top.width (number) - width of the "top" text, null for auto
- args.top.space (number) - distance of the "top" text from the shadow in pixels
- args.top.html (string) - "top" HTML
- args.top.enabled (boolean) - enable/disabled "top" text
- args.bottom.width (number) - width of the "bottom" text, null for auto
- args.bottom.space (number) - distance of the "bottom" text from the shadow in pixels
- args.bottom.html (string) - "bottom" HTML
- args.bottom.enabled (boolean) - enable/disabled "bottom" text
Example
dp.onTimeRangeResizing = function(args) {
args.top.enabled = true;
args.top.html = "Duration: " + args.duration.totalHours() + " hours";
};