Time Header Customization

The time header cells can be customized using the onBeforeTimeHeaderRender event handler. This event handler lets you set properties of each time header cell:

• change the content (plain text or HTML)

• change the background color

• add custom CSS class

• add active areas with icons that trigger custom actions

You can use the event handler to add custom date/time segments to the time headers, highlight certain days (current day, holidays), add custom time units, change the date format, add icons, context menu and so on.

See Also

• Time Header Rows

• Hiding Time Columns

JavaScript Scheduler

In the JavaScript Scheduler component, use the onBeforeTimeHeaderRender event handler.

Example: Week Numbers

This example modifies the text (args.header.html) of the second time header row (args.header.level === 1). It displays the text "Week" and the ISO 8601 week number.

dp.timeHeaders = [
  { groupBy: "Month" },
  { groupBy: "Week" },
  { groupBy: "Day", format: "d"}
];

dp.onBeforeTimeHeaderRender = function(args) {
  if (args.header.level === 1) {
    args.header.html = "Week " + args.header.start.weekNumberISO();
  }
};

Example: Highlighting Weekends

This example sets a custom background (args.header.backColor) and CSS class (args.header.cssClass) for weekend days.

dp.timeHeaders = [
    { groupBy: "Month", format: "MMM yyyy" },
    { groupBy: "Day", format: "d" }
];

dp.onBeforeTimeHeaderRender = function(args) {
    if (args.header.level === 1) {
        var dayOfWeek = args.header.start.getDayOfWeek();
        if (dayOfWeek === 0 || dayOfWeek === 6) {
            args.header.backColor = "#d0d0d0";
            args.header.cssClass = "weekend_header";
        }
    }
};

JavaScript Tutorials

• JavaScript Scheduler Time Header Customization

• JavaScript Scheduler: Highlighting Holidays

• JavaScript Scheduler: Custom Time Header Segments

• JavaScript Scheduler: Show Separators in the Time Header

Angular Scheduler

In the Angular Scheduler component, use the onBeforeTimeHeaderRender property of the config object to specify the event handler.

The following Angular example adds a blue bar to the bottom of the weekend time headers using active areas:

import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from 'daypilot-pro-angular';
import {DataService} from './data.service'; {}

@Component({
  selector: 'scheduler-component',
  template: `<daypilot-scheduler [config]="config"></daypilot-scheduler>`,
  styles: [``]
})
export class SchedulerComponent implements AfterViewInit {

  config: DayPilot.SchedulerConfig = {

    // ...
    onBeforeTimeHeaderRender: args => {
      if (args.header.level === 1) {
        const day = args.header.start.dayOfWeek();
        if (day === 0 || day === 6) {
          args.header.areas = [
            { left: 0, right: 0, bottom: 0, height: 4, backColor: "#3d85c6"}
          ];
        }
      }
    },
  };

  // ...

}

Angular Tutorials

• Angular Scheduler: Highlighting Holidays

Vue Scheduler

Vue Tutorials

• Vue Scheduler: How to Display Holidays

protected void DayPilotScheduler1_BeforeTimeHeaderRender(object sender, DayPilot.Web.Ui.Events.BeforeTimeHeaderRenderEventArgs e)
{
  if (e.Level == 1)
  {
    e.InnerHTML = String.Format("Week {0}", Week.WeekNrISO8601(e.Start));
  }
}

protected override void OnBeforeTimeHeaderRender(BeforeTimeHeaderRenderArgs e)
{
  e.InnerHtml = String.Format("<span style="font-weight: bold">{0}</span>", e.Start.ToShortDateString());
}

protected override void OnBeforeTimeHeaderRender(BeforeTimeHeaderRenderArgs e)
{
  if (e.Start.DayOfWeek == DayOfWeek.Saturday)
  {
    e.BackColor = "red";
  }
}

e.CssClass = "weekend_header";