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