JavaScript Calendar Resource Header Customization

You can customize the column header of the JavaScript Calendar component using the onBeforeHeaderRender event handler.

It will allow you to customize the column header appearance:

  • You can set custom background color.

  • You can modify the column header text/HTML.

  • You can add custom CSS class to the column header cell.

  • You can add icons, images, or action buttons using column header active areas.

If you only want to change the date format (daywork weekweek, and days calendar views), you can use the headerDateFormat property instead to change the date formatting string (e.g "dddd d MMMM yyyy" will result in "Thursday 8 September 2023").

JavaScript Calendar

You can customize the column header content using onBeforeHeaderRender event handler.

Set custom HTML:

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

Set background color:

const calendar = new DayPilot.Calendar("dp", {
  onBeforeHeaderRender: args => {
    args.header.backColor = "#f0f0f0";
  },
  // ...
});
calendar.init();

Related Tutorials

Angular Calendar

In the Angular Calendar component, you can use the onBeforeHeaderRender event to modify the calendar column header properties:

import {Component, ComponentRef, ViewContainerRef} from "@angular/core";
import {DayPilot} from "daypilot-pro-angular";
import {HeaderComponent} from "./header.component";

@Component({
  selector: 'calendar-component',
  template: `<daypilot-calendar [config]="config"></daypilot-calendar>`,
  styles: [``]
})
export class CalendarComponent {
  config: DayPilot.CalendarConfig = {
    viewType: "Week",
    onBeforeHeaderRender: args => {
      args.header.cssClass = "my-header-class";
    },
  };  
}

You can also use onBeforeHeaderDomAdd event to add a custom Angular component to the calendar header.

calendar.component.ts

import {Component, ComponentRef, ViewContainerRef} from "@angular/core";
import {DayPilot} from "daypilot-pro-angular";
import {HeaderComponent} from "./header.component";

@Component({
  selector: 'calendar-component',
  template: `<daypilot-calendar [config]="config"></daypilot-calendar>`,
  styles: [``]
})
export class CalendarComponent {
  config: DayPilot.CalendarConfig = {
    viewType: "Week",
    onBeforeHeaderDomAdd: args => {
      const component: ComponentRef<HeaderComponent> = this.viewContainerRef.createComponent(HeaderComponent);

      component.instance.text = args.header.name;
      component.changeDetectorRef.detectChanges();

      args.element = component.location.nativeElement;
      (<any>args).component = component;
    },
    onBeforeHeaderDomRemove: args => {
      const component = (<any>args).component;
      component.destroy();
    }
  };

  constructor(private viewContainerRef: ViewContainerRef) {}
  
}

header.component.ts

import {Component, ViewChild, AfterViewInit, Input} from '@angular/core';

@Component({
  selector: 'header-component',
  template: `<button (click)="click()">{{text}}</button>`,
  styles: [`
  button {
    background-color: #3c78d8;
    border: 1px solid #1155cc;
    color: #fff;
  }
  `]

})
export class HeaderComponent {

  @Input()
  text: string = "";

  click() {
    console.log("button clicked");
  }

}

Related Angular Tutorials

ASP.NET WebForms

Example: Custom date format

protected void DayPilotCalendar1_BeforeHeaderRender(object sender, BeforeHeaderRenderEventArgs e)
{
  e.Html += e.Date.ToShortDateString();
}

Example: Image in column header

protected void DayPilotCalendar1_BeforeHeaderRender(object sender, BeforeHeaderRenderEventArgs e)
{
  e.InnerHTML = "<img src="yourimage.png" width='15' height='15' /> " + e.InnerHTML;
}

ASP.NET MVC

protected override void OnBeforeHeaderRender(BeforeHeaderRenderArgs e)
{
  e.Html += e.Date.ToShortDateString();
}