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 BeforeTimeHeaderRender event.

Default Time Header Rows

scheduler-time-header-default.png

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.

ASP.NET WebForms

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

scheduler-time-headers-multi-row.png

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.png

@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

JavaScript

javascript-scheduler-time-headers.png

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

Demo