DayPilot.Scheduler.onTimeRangeClicked

The onTimeRangeClicked event handler fires when the user clicks an existing time range selection in the JavaScript Scheduler component, after the default action configured by DayPilot.Scheduler.timeRangeClickHandling is performed.

Declaration

DayPilot.Scheduler.onTimeRangeClicked(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

Notes

This handler runs after the action configured by DayPilot.Scheduler.timeRangeClickHandling has already been processed. To intercept the click before that happens, handle DayPilot.Scheduler.onTimeRangeClick instead. Clicking an unselected grid cell fires DayPilot.Scheduler.onTimeRangeSelect and DayPilot.Scheduler.onTimeRangeSelected instead.

Examples

JavaScript

const dp = new DayPilot.Scheduler("dp", {
  timeRangeClickHandling: "Enabled",
  onTimeRangeClicked: (args) => {
    console.log(args.start, args.end, args.resource);
  },
  // ...
});
dp.init();

Angular

<daypilot-scheduler [config]="config"></daypilot-scheduler>

config: DayPilot.SchedulerConfig = {
  timeRangeClickHandling: "Enabled",
  onTimeRangeClicked: (args) => {
    console.log(args.start, args.end, args.resource);
  },
  // ...
};

React

<DayPilotScheduler
  timeRangeClickHandling="Enabled"
  onTimeRangeClicked={onTimeRangeClicked}
  {/* ... */}
/>

const onTimeRangeClicked = (args) => {
  console.log(args.start, args.end, args.resource);
};

Vue

<DayPilotScheduler
  timeRangeClickHandling="Enabled"
  @timeRangeClicked="onTimeRangeClicked"
  <!-- ... -->
/>

const onTimeRangeClicked = (args) => {
  console.log(args.start, args.end, args.resource);
};

See Also

DayPilot.Scheduler.timeRangeClickHandling

DayPilot.Scheduler.onTimeRangeClick

DayPilot.Scheduler.onTimeRangeSelect

DayPilot.Scheduler.onTimeRangeSelected

DayPilot.Scheduler Class