Column Header Hierarchy

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.

ASP.NET WebForms

1. Set ViewType="Resources".
2. Set HeaderLevels="2".
3. 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

• http://www.daypilot.org/demo/Calendar/DaysResourcesView.aspx

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);
}

Demo

• http://mvc.daypilot.org/demo/Calendar/DaysResources

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

• http://javascript.daypilot.org/demo/calendar/hierarchy.html