DayPilot.Month.onBeforeHeaderRender

The onBeforeHeaderRender event handler fires before each day-of-week header is rendered in the monthly calendar.

Declaration

DayPilot.Month.onBeforeHeaderRender(args)

Parameters

• args.header.dayOfWeek (number) - day-of-week index (read-only)

• args.header.html (string) - custom header HTML

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

• args.header.cssClass (string) - custom CSS class

Notes

Use this handler to customize weekday labels and styling before the header is displayed.

Examples

JavaScript

const month = new DayPilot.Month("dp", {
  onBeforeHeaderRender: (args) => {
    if (args.header.dayOfWeek === 6) {
      args.header.backColor = "#cccccc";
    }
  },
  // ...
});
month.init();

Angular

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

config: DayPilot.MonthConfig = {
  onBeforeHeaderRender: (args) => {
    if (args.header.dayOfWeek === 6) {
      args.header.backColor = "#cccccc";
    }
  },
  // ...
};

React

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

const onBeforeHeaderRender = (args) => {
  if (args.header.dayOfWeek === 6) {
    args.header.backColor = "#cccccc";
  }
};

Vue

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

const onBeforeHeaderRender = (args) => {
  if (args.header.dayOfWeek === 6) {
    args.header.backColor = "#cccccc";
  }
};

See Also

DayPilot.Month.onBeforeHeaderExport

DayPilot.Month Class