Column Header Hierarchy

The columns defined in the 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 multiple levels:

How it works:

• It's an extension of the resources view that can show multiple rows in the header.
• Each column can specify child columns using children property.
• The headerLevels property determines the number of rows in the header.

JavaScript Resource Calendar

Example: Calendar with Resource Groups

This example shows 6 resources (cars) as columns, organized in two groups. The resource calendar displays two header levels.

<div id="dp"></div>

<script>
  
  const 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>

Example: Calendar with Multiple Days per Resource

This example shows 7 days as columns, displayed as children of a resource group.

<div id="dp"></div>

<script>
  const dp = new DayPilot.Calendar("dp");

  dp.viewType = "Resources";
  dp.headerLevels = 2;
  dp.columns = [];

  const group = { name: "John", children: []};
  dp.columns.push(group);

  const start = DayPilot.Date.today().firstDayOfWeek();
  for (var i = 0; i < 7; i++) {
      const date = start.addDays(i);
      const column = {name: date.toString("MMMM d, yyyy"), id: "john", start: date};
      group.children.push(column);
  };
  
  dp.init();

</script>

Example: Calendar with Multiple Resources per Day

This resource calendar example displays three days. Each day displays three resources as child columns.

<div id="dp"></div>

<script>
  const dp = new DayPilot.Calendar("dp");

  dp.viewType = "Resources";
  dp.headerLevels = 2;
  dp.columns = [];

  const resources = [
      {name: "Resource A", id: "A"},
      {name: "Resource B", id: "B"},
      {name: "Resource C", id: "C"},
  ];

  const start = new DayPilot.Date("2022-06-01");
  for (var i = 0; i < 3; i++) {
      const date = start.addDays(i);
      const column = {name: date.toString("MMMM d, yyyy")};

      column.children = resources.map(r => ({
          name: r.name,
          id: r.id,
          start: date
      }));

      dp.columns.push(column);
  };

</script>

Demo

• Demo: Resource Calendar with Column Hierarchy

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

}

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