Time Header Customization

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

JavaScript

Use onBeforeTimeHeaderRender event handler:

dp.onBeforeTimeHeaderRender = function(args) {
    args.header.html = args.header.hours + ":" + args.header.minutes + " *";
    args.header.areas = [ {left: 0, top: 0, right: 0, bottom: 0, v: "Hover", action: "JavaScript", js: function(e) { alert(e.start);} } ];
}; 

ASP.NET WebForms

Read-only properties:

• Start
• End
• Hour

Customizable properties:

• Html
• Areas (active areas)

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