DayPilot.Scheduler.onTimeHeaderClick

The onTimeHeaderClick event handler fires when the user clicks a time header cell in the JavaScript Scheduler component.

Declaration

DayPilot.Scheduler.onTimeHeaderClick(args)

Parameters

• args.control (DayPilot.Scheduler) - control instance (read-only)

• args.header.start (DayPilot.Date) - start of the time header cell (read-only)

• args.header.end (DayPilot.Date) - end of the time header cell (read-only)

• args.header.level (number) - zero-based header level (read-only)

• args.meta (boolean) - true if the Meta key is pressed

• args.ctrl (boolean) - true if the Ctrl key is pressed

• args.shift (boolean) - true if the Shift key is pressed

• args.originalEvent (MouseEvent) - original mouse event object

• args.preventDefault() - cancels the default action

Notes

In api=1 mode, the legacy signature is onTimeHeaderClick(header), where header.start, header.end, and header.level identify the clicked header cell.

Examples

JavaScript

const dp = new DayPilot.Scheduler("dp", {
  onTimeHeaderClick: (args) => {
    args.preventDefault();
    console.log(args.header.start, args.header.end, args.header.level);
  },
  // ...
});
dp.init();

Angular

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

config: DayPilot.SchedulerConfig = {
  onTimeHeaderClick: (args) => {
    args.preventDefault();
    console.log(args.header.start, args.header.end, args.header.level);
  },
  // ...
};

React

<DayPilotScheduler
  onTimeHeaderClick={onTimeHeaderClick}
  {/* ... */}
/>

const onTimeHeaderClick = (args) => {
  args.preventDefault();
  console.log(args.header.start, args.header.end, args.header.level);
};

Vue

<DayPilotScheduler
  @timeHeaderClick="onTimeHeaderClick"
  <!-- ... -->
/>

const onTimeHeaderClick = (args) => {
  args.preventDefault();
  console.log(args.header.start, args.header.end, args.header.level);
};

See Also

Time Header [doc.daypilot.org]

DayPilot.Scheduler Class