The scheduler time header rows can be customized using timeHeaders property.
- 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.
- 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
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
- DayPilot.Scheduler.timeHeaders [api.daypilot.org]
Demo
ASP.NET WebForms
It's possible to show multiple rows of column groups using TimeHeaders collection.
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
@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) } })