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.startDate = "2027-08-01";
  dp.days = 31;
  dp.scale = "Day";
  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.

API: treeEnabled.

The examples group Room A and Room B under an initially expanded Rooms parent. Event resource IDs refer to those child rooms.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "G", name: "Rooms", expanded: true, children: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    treeEnabled: true
  };

}

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "G", name: "Rooms", expanded: true, children: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      treeEnabled={true}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "G", name: "Rooms", expanded: true, children: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const treeEnabled = true;

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :treeEnabled="treeEnabled"
    />
  </div>
</template>

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