DayPilot.Calendar.onBeforeTimeHeaderRender

The onBeforeTimeHeaderRender event handler lets you customize time headers in the JavaScript Calendar component.

Declaration

DayPilot.Calendar.onBeforeTimeHeaderRender(args)

Parameters

• args.header.areas - active areas displayed in the time header
• args.header.hours (number) - hour part of the header time (read-only)
• args.header.html (string) - HTML displayed in the time header
• args.header.minutes (number) - minute part of the header time (read-only)
• args.header.start (string) - header time as text, for example "13:30" (read-only)
• args.header.text (string) - plain text used during Calendar image export (available since 2022.3.5376)
• args.header.time (DayPilot.Duration) - header time value (read-only, available since 2018.4.3474)

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  onBeforeTimeHeaderRender: args => {
    if (args.header.hours === 12) {
      args.header.html = "noon";
    }
  },
  // ...
});
calendar.init();

Angular

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

config: DayPilot.CalendarConfig = {
  onBeforeTimeHeaderRender: args => {
    if (args.header.hours === 12) {
      args.header.html = "noon";
    }
  },
  // ...
};

React

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

const onBeforeTimeHeaderRender = (args) => {
  if (args.header.hours === 12) {
    args.header.html = "noon";
  }
};

Vue

<DayPilotCalendar
  @beforeTimeHeaderRender="onBeforeTimeHeaderRender"
  <!-- ... -->
/>

const onBeforeTimeHeaderRender = (args) => {
  if (args.header.hours === 12) {
    args.header.html = "noon";
  }
};

See Also

• Time Header Customization [doc.daypilot.org]
• Client-Side Export [doc.daypilot.org]
• DayPilot.Calendar Class