DayPilot.Calendar.onBeforeHeaderRender

The onBeforeHeaderRender event handler lets you customize the column headers of the JavaScript Calendar component.

Declaration

DayPilot.Calendar.onBeforeHeaderRender(args)

Parameters

• args.column (DayPilot.Column) - header definition object; read-only

• args.header.areas (array) - list of active area objects

• args.header.backColor (string) - custom column background color

• args.header.children (array) - child columns; read-only

• args.header.cssClass (string) - custom CSS class; available since 2022.4.5481

• args.header.html (string) - column HTML; if set it overrides the default content

• args.header.toolTip (string) - custom column tooltip

• args.header.horizontalAlignment ("left" | "center" | "right") - horizontal alignment of the header cell content

• args.header.verticalAlignment ("top" | "center" | "bottom") - vertical alignment of the header cell content

Notes

Set args.header.html to replace the default header content for the current column. You can also add active areas, custom styling, alignment, and tooltips, and args.header.cssClass is available since version 2022.4.5481.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  onBeforeHeaderRender: (args) => {
    args.header.html = args.column.start.toString("M/d/yyyy");
  },
  // ...
});
calendar.init();

Angular

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

config: DayPilot.CalendarConfig = {
  onBeforeHeaderRender: (args) => {
    args.header.html = args.column.start.toString("M/d/yyyy");
  },
  // ...
};

React

<DayPilotCalendar
  onBeforeHeaderRender={onBeforeHeaderRender}
  {/* ... */}
/>

const onBeforeHeaderRender = (args) => {
  args.header.html = args.column.start.toString("M/d/yyyy");
};

Vue

<DayPilotCalendar
  @beforeHeaderRender="onBeforeHeaderRender"
  <!-- ... -->
/>

const onBeforeHeaderRender = (args) => {
  args.header.html = args.column.start.toString("M/d/yyyy");
};

See Also

Column Header Customization [doc.daypilot.org]

DayPilot.Calendar Class