The resources property (array) specifies resources that will be displayed as rows in the JavaScript Scheduler.
Resource Structure (Properties)
Required properties:
- id (string | number) - resource ID; the row will display all events where the resource value matches the resource ID
- name (string) - resource name; it will be displayed in the default row header column
Optional properties:
- areas (array) - an array of active areas
- backColor (string) - background color (CSS format)
- bubbleHtml (string) - static bubble HTML
- fontColor (string) - foreground color (CSS format)
- cellsAutoUpdated (boolean) - refresh cells in this row after every change (see also JavaScript Scheduler: Displaying Group Availability)
- cellsDisabled (boolean) - disables all cells in this row
- children (array) - an array of child resources
- columns (array) - an array of row header columns (items support html, cssClass, and backColor properties) - only applicable when rowHeaderColumnsMode is set to "Legacy"
- 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
- emptyHeight (number) - height of an empty row (see also rowEmptyHeight)
- eventHeight (number) - default event height for this resource (in pixels)
- eventStackingLineHeight (number) - overrides eventStackingLineHeight for this row
- expanded (boolean) - sets the tree node expanded/collapsed state
- html (string) - if specified, the html value will be used instead of "name" in the row header
- marginBottom (number) - overrides rowMarginBottom for this row
- marginTop (number) - overrides rowMarginTop for this row
- maxLines (number) - sets the maximum number of lines that display concurrent events within a row (available since 2023.1.5515)
- minHeight (number) - overrides rowMinHeight for this row
- moveDisabled (boolean) - disables row moving for this row
- tags (object) - custom data object
- toolTip (string) - hover tooltip text
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" }
];