javascript calendar time header cell customization

The time header cells (vertical axis) can be customized using onBeforeTimeHeaderRender event handler.

JavaScript Calendar

This example sets custom content (args.header.html) and CSS class (args.header.cssClass) for the hour headers.

onBeforeTimeHeaderRender: args => {
    const hour = DayPilot.Date.today().addTime(args.header.time);
    args.header.html = hour.toString("h:mm tt");
    args.header.cssClass = "hourheader";
},

ASP.NET WebForms

Read-only properties:

  • Start

  • End

  • Hour

Customizable properties:

protected void DayPilotCalendar1_BeforeTimeHeaderRender(DayPilot.Web.Ui.Events.Calendar.BeforeTimeHeaderRenderEventArgs e)
{
  e.Html = e.Start.ToString("HH:mm");
}

ASP.NET MVC

Read-only properties:

  • Start

  • Hour

Customizable properties:

  • Html

protected override void OnBeforeTimeHeaderRender(BeforeTimeHeaderRenderArgs e)
{
  e.Html = e.Start.ToString("HH:mm");
}

Availability

Availability of this feature in DayPilot editions:

LitePro
DayPilot for JavaScript
DayPilot for ASP.NET WebForms
DayPilot for ASP.NET MVC
DayPilot for Java