Column 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 (day, work week, week, 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

• Spring Boot Resource-Scheduling Calendar (Open Source)

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";
    },
  };  
}

In the Pro version, 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

• Angular Resource Calendar (Open-Source)

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

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

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