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 JavaScriptNo SupportFull Support
DayPilot for ASP.NET WebFormsNo SupportFull Support
DayPilot for ASP.NET MVCNo SupportFull Support
DayPilot for JavaNo SupportFull Support