DayPilot Scheduler supports an expandable tree of resources.

JavaScript

javascript scheduler resource tree

Initialization

<div id="dp"><div>

<script>
  var dp = new DayPilot.Scheduler("dp");
  // ...
  dp.treeEnabled = true;
  dp.resources = [
    { name: "Locations", id: "Locations", expanded: true, children:[
        { name : "Room 1", id : "Room1" },
        { name : "Room 2", id : "Room2" },
        { name : "Room 3", id : "Room3" },
        { name : "Room 4", id : "Room4" },
      ]
    },
    { name: "People", id: "People", expanded: true, children:[
        { name : "Person 1", id : "Person1" },
        { name : "Person 2", id : "Person2" },
        { name : "Person 3", id : "Person3" },
        { name : "Person 4", id : "Person4" },
      ]
    },
    { name: "Tools", id: "Tools", expanded: true, children:[
        { name : "Tool 1", id : "Tool1" },
        { name : "Tool 2", id : "Tool2" }
      ] 
    },
  ];

  dp.events.list = [
    {"start":"2022-08-04T12:00:00","end":"2022-08-05T13:00:00","id":"d81fd375-781a-0279-44c6-c224d102fa39","resource":"Room1","text":"Event 1","barColor":"#3c78d8","barBackColor":"#a4c2f4"},
    {"start":"2022-08-08T12:00:00","end":"2022-08-09T12:00:00","id":"990867b2-86c0-797c-659c-d551a9a4fbdc","resource":"Room2","text":"Event 2","barColor":"#6aa84f","barBackColor":"#b6d7a8"},
    {"start":"2022-08-04T12:00:00","end":"2022-08-09T17:00:00","id":"5e017761-de95-01d7-819f-2d769ddb6668","resource":"Room3","text":"Event 3","barColor":"#f1c232","barBackColor":"#ffe599"},
  ];

  dp.init();
</script>

Update

const resources = [
  { name: "Tools", id: "Tools", expanded: true, children: [
      { name : "Tool 1", id : "Tool1" },
      { name : "Tool 2", id : "Tool2" }
    ] 
  }
];
dp.update({
  resources
});

Demo

ASP.NET WebForms

asp.net scheduler resource tree

The resources can be organized in a tree hierarchy.

Setup

  1. Set TreeEnabled="true".

  2. Define the tree using Resources collection (add node children to Resource.Children collection).

  3. (Optionally) adjust the image position using TreeImageMarginTop and TreeImageMarginLeft.

  4. (Optionally) adjust the level indent (TreeIndent).

<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  ...
  TreeEnabled="true"
  TreeIndent="15"
  TreeImageMarginLeft="3"
  TreeImageMarginTop="6"
  >
</DayPilot:DayPilotScheduler>

Loading Resources

See also Resource Loading.

CSS

You can style the following elements using a CSS theme:

  • Resource header cells

  • Node icons (nochildren, expand, collapse)

The margins and indentation has to be set using inline properties.

Demo

ASP.NET MVC

The Scheduler resources can be organized in a tree hierarchy.

The resource tree has to be enabled first using TreeEnabled property:

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  TreeEnabled = true
})

The child resources should be added using Resource.Children collection:

public class SchedulerController : Controller
{
  public ActionResult Backend()
  {
    return new Dps().CallBack(this);
  }

  class Dps : DayPilotScheduler
  {
    protected override void OnInit(InitArgs e)
    {
        Resource b1 = new Resource("Building 1", "B1");
        Resources.Add(r);

        b1.Children.Add("Room A", "RA");
        b1.Children.Add("Room B", "RB");

        UpdateWithMessage("Welcome!", CallBackUpdateType.Full);
    }
  }
}