The columns created using Columns property in Resources mode can be arranged in a hierarchy.
You can show multiple resources for each day:
You can show different number of resources for each day:
You can aggregate resources into groups:
You can show resource details in additional header rows:
The number of header rows is not limited, the hierarchy can show even 3 or more levels:
How it works:
- It's an extension of the Resources view that can show multiple rows in the header.
- The Column class is extended and it can contain other columns as Children.
- The HeaderLevels property determines the number of rows in the header.
JavaScript
Resource Groups Example
<div id="dp"></div> <script type="text/javascript"> var dp = new DayPilot.Calendar("dp"); dp.viewType = "Resources"; dp.headerLevels = 2; dp.columns = [ { name: "Big Cars", children: [ { name: "Big Car #1", id:"big1"}, { name: "Big Car #2", id:"big2"}, { name: "Big Car #3", id:"big3"} ]}, { name: "Small Cars", children: [ { name: "Small Car #1", id:"small1"}, { name: "Small Car #2", id:"small2"}, { name: "Small Car #3", id:"small3"} ]} ]; dp.init(); </script>
Resources-Days Example
<div id="dp"></div> <script type="text/javascript"> var dp = new DayPilot.Calendar("dp"); dp.viewType = "Resources"; dp.headerLevels = 2; dp.columns = []; var group = { name: "John", children: []}; dp.columns.push(group); var start = new DayPilot.Date().getDatePart().firstDayOfWeek(); for (var i = 0; i < 7; i++) { var date = start.addDays(i); var column = {name: date.toString("MMMM d, yyyy"), id: "john", start: date}; group.children.push(column); }; dp.init(); </script>
Demo
ASP.NET WebForms
- Set ViewType="Resources".
- Set HeaderLevels="2".
- Generate the Columns hierarchy in Page_Load:
DayPilotCalendar1.Columns.Clear(); for (int i = 0; i < 3; i++) { DateTime day = DateTime.Today.AddDays(i); Column c = new Column(day.ToShortDateString(), day.ToString("s")); c.Date = day; DayPilotCalendar1.Columns.Add(c); Column c1 = new Column("A", "A"); c1.Date = day; c.Children.Add(c1); Column c2 = new Column("B", "B"); c2.Date = day; c.Children.Add(c2); }
Demo
ASP.NET MVC
protected override void OnInit(InitArgs initArgs) { Columns.Clear(); Column today = new Column(DateTime.Today.ToShortDateString(), DateTime.Today.ToString("s")); today.Children.Add("A", "a", DateTime.Today); today.Children.Add("B", "b", DateTime.Today); Columns.Add(today); Column tomorrow = new Column(DateTime.Today.AddDays(1).ToShortDateString(), DateTime.Today.AddDays(1).ToString("s")); tomorrow.Children.Add("A", "a", DateTime.Today.AddDays(1)); tomorrow.Children.Add("B", "b", DateTime.Today.AddDays(1)); Columns.Add(tomorrow); UpdateWithMessage("Welcome!", CallBackUpdateType.Full); }