The onTimeRangeClick event handler fires when the user clicks an existing time range selection in the JavaScript Scheduler component, before the default action configured by DayPilot.Scheduler.timeRangeClickHandling is performed.
DayPilot.Scheduler.onTimeRangeClick(args)args.start (DayPilot.Date) - selection start
args.end (DayPilot.Date) - selection end
args.resource (string | number) - resource ID of the selected time range
args.preventDefault() - cancels the default action
Call args.preventDefault() to intercept the click before the action configured by DayPilot.Scheduler.timeRangeClickHandling runs. The corresponding post-action handler is DayPilot.Scheduler.onTimeRangeClicked. Clicking an unselected grid cell fires DayPilot.Scheduler.onTimeRangeSelect and DayPilot.Scheduler.onTimeRangeSelected instead.
JavaScript
const dp = new DayPilot.Scheduler("dp", {
timeRangeClickHandling: "Enabled",
onTimeRangeClick: (args) => {
args.preventDefault();
console.log(args.start, args.end, args.resource);
},
// ...
});
dp.init();Angular
<daypilot-scheduler [config]="config"></daypilot-scheduler>config: DayPilot.SchedulerConfig = {
timeRangeClickHandling: "Enabled",
onTimeRangeClick: (args) => {
args.preventDefault();
console.log(args.start, args.end, args.resource);
},
// ...
};React
<DayPilotScheduler
timeRangeClickHandling="Enabled"
onTimeRangeClick={onTimeRangeClick}
{/* ... */}
/>const onTimeRangeClick = (args) => {
args.preventDefault();
console.log(args.start, args.end, args.resource);
};Vue
<DayPilotScheduler
timeRangeClickHandling="Enabled"
@timeRangeClick="onTimeRangeClick"
<!-- ... -->
/>const onTimeRangeClick = (args) => {
args.preventDefault();
console.log(args.start, args.end, args.resource);
};DayPilot.Scheduler.timeRangeClickHandling
DayPilot.Scheduler.onTimeRangeClicked
DayPilot.Scheduler.onTimeRangeSelect