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


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" }