DayPilot.Scheduler.onTimeHeaderClicked

The onTimeHeaderClicked event handler fires when the user clicks a time header cell in the JavaScript Scheduler component, after the default action.

Declaration

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

Notes

This handler runs after the default action associated with the clicked header cell. Use the args.header object to inspect the exact time range and header level that was clicked.

Examples

JavaScript

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

Angular

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

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

React

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

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

Vue

<DayPilotScheduler
  @timeHeaderClicked="onTimeHeaderClicked"
  <!-- ... -->
/>

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

See Also

Time Header [doc.daypilot.org]

DayPilot.Scheduler Class