DayPilot Scheduler supports an expandable tree of resources.

ASP.NET WebForms

asp.net-scheduler-resource-tree.png

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

JavaScript

javascript-scheduler-resource-tree.png

Initialization

<div id="dp"><div>

<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  // ...
  dp.treeEnabled = true;
  dp.resources = [
    { name: "Tools", id: "Tools", expanded: true, children:[
        { name : "Tool 1", id : "Tool1" },
        { name : "Tool 2", id : "Tool2" }
      ] 
    },
    { name: "People", id: "People", expanded: true, children:[
        { name : "Person 1", id : "Person1" },
        { name : "Person 2", id : "Person2" }
      ]
    },
    { name: "Locations", id: "Locations", expanded: true, children:[
        { name : "Location 1", id : "Location1" },
        { name : "Location 2", id : "Location2" }
      ]
    }
  ];

  // generate and load events
  dp.events.list = [
    {
        start: "2015-03-02T00:00:00",
        end: "2015-03-04T00:00:00",
        id: 1,
        resource: "Tool1",
        text: "Event #1"
    },
    {
        start: "2015-03-03T00:00:00",
        end: "2015-03-06T00:00:00",
        id: 2,
        resource: "Tool2",
        text: "Event #2"
    },
  ];

  dp.init();
</script>

Update

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

Demo