Resource Tree

DayPilot Scheduler supports an expandable tree of resources.

JavaScript

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":"2027-08-04T12:00:00","end":"2027-08-05T13:00:00","id":"d81fd375-781a-0279-44c6-c224d102fa39","resource":"Room1","text":"Event 1","barColor":"#3c78d8","barBackColor":"#a4c2f4"},
    {"start":"2027-08-08T12:00:00","end":"2027-08-09T12:00:00","id":"990867b2-86c0-797c-659c-d551a9a4fbdc","resource":"Room2","text":"Event 2","barColor":"#6aa84f","barBackColor":"#b6d7a8"},
    {"start":"2027-08-04T12:00:00","end":"2027-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

• JavaScript Scheduler Resource Tree Demo

Expand and Collapse Animation

Try the resource tree animation demo to compare durations and easing curves.

Tree animation is enabled by default. In Pro since version 2026.4.7077, set treeAnimation: "Auto" to respect the system’s reduced-motion preference:

dp.update({
  treeAnimation: "Auto",
  treeAnimationDuration: 350,
  treeAnimationEasing: "ease-in-out"
});

Use treeAnimation: false to turn the animation off. treeAnimationDuration defaults to "Auto", which chooses a suitable duration for each group. Set a nonnegative number of milliseconds for consistent timing, or 0 for an immediate change.

Use treeAnimationEasing to change how the animation speeds up and slows down. The default is "standard"; see the property reference for supported easing names and custom cubic-bezier() values.

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

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

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