DayPilot.Scheduler.onTimeRangeClick

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.

Declaration

DayPilot.Scheduler.onTimeRangeClick(args)

Parameters

  • 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

Notes

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.

Examples

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);
};

See Also

DayPilot.Scheduler.timeRangeClickHandling

DayPilot.Scheduler.onTimeRangeClicked

DayPilot.Scheduler.onTimeRangeSelect

DayPilot.Scheduler.onTimeRangeSelected

DayPilot.Scheduler Class

Availability

Availability of this API item in DayPilot editions:

LitePro
DayPilot for JavaScript