javascript html5 scheduler time headers

The scheduler time header rows can be customized using timeHeaders property.

  1. You have to specify the groupBy unit for each of the time header row ("Hour", "Day", "Week", "Month", "Year", etc.). See also time header groups.

  2. You can also customize the date format using format property (e.g. "MMMM yyyy"). For time format string pattern see DayPilot.Date.toString().

The header cell HTML can be customized using onBeforeTimeHeaderRender event.

Default Time Header Rows

javascript html5 scheduler time header rows default

The default time header levels are defined as follows:

  • 0: groupBy: "Default" (the value defined using CellGroupBy property)

  • 1: groupBy: "Cell" (corresponds to grid cell duration)

Supported GroupBy Values

See time header groups.

JavaScript

You can set the time headers using timeHeaders property:

dp.timeHeaders = [ 
  {groupBy: 'Month', format: 'MMMM yyyy'}, 
  {groupBy: 'Week'},
  {groupBy: 'Day'}
];

See also

Demo

ASP.NET WebForms

It's possible to show multiple rows of column groups using TimeHeaders collection.

scheduler time headers multi row

Example (.aspx)

<DayPilot:DayPilotScheduler runat="server" ID="DayPilotScheduler1"  ... >
  <TimeHeaders>
    <DayPilot:TimeHeader GroupBy="Month" Format="MMMM yyyy" />
    <DayPilot:TimeHeader GroupBy="Week" />
    <DayPilot:TimeHeader GroupBy="Day" />
  </TimeHeaders>
</DayPilot:DayPilotScheduler>

Example (C#)

protected void Page_Load(object sender, EventArgs e)
{
  // ...
	
  DayPilotScheduler1.TimeHeaders.Clear();
  DayPilotScheduler1.TimeHeaders.Add(new TimeHeader(GroupByEnum.Month, "MMMM yyyy"));
  DayPilotScheduler1.TimeHeaders.Add(new TimeHeader(GroupByEnum.Week));
  DayPilotScheduler1.TimeHeaders.Add(new TimeHeader(GroupByEnum.Day));
  // ...
}

Demo

ASP.NET MVC

You can display multiple levels of time headers grouped by different units using TimeHeaders property

scheduler asp.net mvc time header levels

@Html.DayPilotScheduler("dps_timeheaders", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  CellDuration = 1440,
  TimeHeaders = new TimeHeaderCollection {
    new TimeHeader(GroupBy.Month, "MMMM yyyy"),
    new TimeHeader(GroupBy.Week),
    new TimeHeader(GroupBy.Day)
  }
})

Demo