DayPilot.Calendar.onHeaderClick

The onHeaderClick event handler fires when the user clicks a calendar column header, before the default action configured by DayPilot.Calendar.headerClickHandling is performed.

Declaration

DayPilot.Calendar.onHeaderClick(args)

Parameters

• args.column.id - column id (resources view only)

• args.column.name - column name

• args.column.start - column start date

• args.column.data - source data item from DayPilot.Calendar.columns.list

• args.originalEvent - original click event object (available since 2020.2.4545)

• args.shift (boolean) - Shift key status (available since 2020.2.4545)

• args.ctrl (boolean) - Ctrl key status (available since 2020.2.4545)

• args.meta (boolean) - Meta key status (available since 2020.2.4545)

• args.preventDefault() - cancels the default action

Notes

In api=1 mode, the legacy signature is DayPilot.Calendar.onHeaderClick(c). The legacy DayPilot.Column object exposes date as DayPilot.Date.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  headerClickHandling: "Select",
  onHeaderClick: args => {
    if (args.column.id === "locked") {
      args.preventDefault();
    }
  },
  // ...
});
calendar.init();

Angular

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

config: DayPilot.CalendarConfig = {
  headerClickHandling: "Select",
  onHeaderClick: args => {
    if (args.column.id === "locked") {
      args.preventDefault();
    }
  },
  // ...
};

React

<DayPilotCalendar
  headerClickHandling="Select"
  onHeaderClick={onHeaderClick}
  {/* ... */}
/>

const onHeaderClick = (args) => {
  if (args.column.id === "locked") {
    args.preventDefault();
  }
};

Vue

<DayPilotCalendar
  headerClickHandling="Select"
  @headerClick="onHeaderClick"
  <!-- ... -->
/>

const onHeaderClick = (args) => {
  if (args.column.id === "locked") {
    args.preventDefault();
  }
};

See Also

Column Header Click [doc.daypilot.org]

DayPilot.Calendar.onHeaderClicked

DayPilot.Calendar.headerClickHandling

DayPilot.Calendar Class