scheduler-time-headers-multi-row.png

The time header cell HTML can be customized using BeforeTimeHeaderRender event.

See Also

JavaScript

See also DayPilot.Scheduler.onBeforeTimeHeaderRender.

dp.timeHeaders = [
  { groupBy: "Month" },
  { groupBy: "Day", format: "d"}
];

dp.onBeforeTimeHeaderRender = function(args) {
  if (args.header.level === 1 && args.header.start.getDayOfWeek() === 6) {
    args.header.html = "Sat";
  }
};

Tutorial

ASP.NET WebForms

protected void DayPilotScheduler1_BeforeTimeHeaderRender(object sender, DayPilot.Web.Ui.Events.BeforeTimeHeaderRenderEventArgs e)
{
  if (e.Level == 1)
  {
    e.InnerHTML = String.Format("Week {0}", Week.WeekNrISO8601(e.Start));
  }
}

BeforeTimeHeaderRender is called once for each time header cell (including the groups).

The following read-only properties of TimeHeaderRenderEventArgs are available:

  • Start - cell start (DateTime)
  • End - cell end (DateTime)
  • IsColGroup - true for column group (any level)
  • Level - header row number (starting at 0)

It is possible to modify the following properties:

  • BackgroundColor (string) - cell background color
  • InnerHTML (string) - cell HTML
  • ToolTip (string) - cell ToolTip
  • CssClass (string) - cell CSS (since build 8.1.3485)

ASP.NET MVC

The time header cells can be customized using OnBeforeTimeHeaderRender event.

This OnBeforeTimeHeaderRender method is called once for each header cell (including the time header group cells).

It is possible to adjust the following properties:

  • BackColor
  • InnerHtml
  • ToolTip

The OnBeforeTimeHeaderRender can be used to set the visibility of time columns for the hidden business hours mode (e.Visible property).

Example:

protected override void OnBeforeTimeHeaderRender(BeforeTimeHeaderRenderArgs e)
{
  e.InnerHtml = String.Format("<span style="font-weight: bold">{0}</span>", e.Start.ToShortDateString());
}

Custom Background

Use OnBeforeTimeHeaderRender:

protected override void OnBeforeTimeHeaderRender(BeforeTimeHeaderRenderArgs e)
{
  if (e.Start.DayOfWeek == DayOfWeek.Saturday)
  {
    e.BackColor = "red";
  }
}

You can also use a custom class instead of setting the background color directly:

e.CssClass = "weekend_header";