DayPilot.Scheduler.resources

An array with resources that will be displayed as rows.

Resource Structure (Properties)

  • id (string | number) - resource ID; the row will display all events where the "resource" value matches the resource ID
  • name (string) - the resource name; it will be displayed in the default row header column
  • html (string) - if specified, the html value will be used instead of "name" in the row header
  • areas (array) - an array of active areas
  • toolTip (string) - hover tooltip text
  • backColor (string) - background color (CSS format)
  • cssClass (string) - custom CSS class
  • contextMenu (string | DayPilot.Menu) - custom context menu
  • dynamicChildren (boolean) - if set to true, the children will be loaded dynamically on expand
  • expanded (boolean) - sets the tree node expanded/collapsed state
  • children (array) - an array of child resources
  • columns (array) - an array of row header column (items support html, cssClass, and backColor properties)
  • eventHeight (number) - default event height for this resource (in pixels)

Example

Resource tree

dp.resources = [
 { name: "Room A", id: "A", expanded: true, children:[
     { name : "Room A.1", id : "A.1" },
     { name : "Room A.2", id : "A.2" }
   ] 
 },
 { name: "Room B", id: "B" },
 { name: "Room C", id: "C", dynamicChildren: true }
];

Columns

dp.resources = [
  { name: "Room 101", id: "101", columns: [{html: "Floor 1", backColor: "#ccc"},  {html: "2 beds", cssClass: "highlight" }] },
  { name: "Room 102", id: "102", columns: [{html: "Floor 1"},  {html: "3 beds"}] },
  { name: "Room 103", id: "103", columns: [{html: "Floor 1"},  {html: "1 bed"}] },
  { name: "Room 201", id: "201", columns: [{html: "Floor 2"},  {html: "2 beds"}] }
];