DayPilot.Gantt.onBeforeTimeHeaderRender

The onBeforeTimeHeaderRender event handler fires before a Gantt time header cell is rendered and lets you customize the time header content and appearance.

Declaration

DayPilot.Gantt.onBeforeTimeHeaderRender(args)

Parameters

• args.header.areas (array) - active areas

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

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

• args.header.end (DayPilot.Date) - cell end (read-only)

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

• args.header.level (number) - header row index (read-only, zero-based)

• args.header.start (DayPilot.Date) - cell start (read-only)

• args.header.toolTip (string) - tooltip text

Notes

Use args.header.level to distinguish individual time header rows when multiple levels are displayed. The args.header.start and args.header.end values are read-only.

Examples

JavaScript

const gantt = new DayPilot.Gantt("dp", {
  onBeforeTimeHeaderRender: (args) => {
    if (args.header.start.getDayOfWeek() === 6) {
      args.header.html = "Sat";
    }
  },
  // ...
});
gantt.init();

Angular

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

config: DayPilot.GanttConfig = {
  onBeforeTimeHeaderRender: (args) => {
    if (args.header.start.getDayOfWeek() === 6) {
      args.header.html = "Sat";
    }
  },
  // ...
};

React

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

const onBeforeTimeHeaderRender = (args) => {
  if (args.header.start.getDayOfWeek() === 6) {
    args.header.html = "Sat";
  }
};

Vue

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

const onBeforeTimeHeaderRender = (args) => {
  if (args.header.start.getDayOfWeek() === 6) {
    args.header.html = "Sat";
  }
};

See Also

DayPilot.Gantt.onBeforeTimeHeaderExport

DayPilot.Gantt Class