DayPilot.Scheduler.resources

The resources property (array) specifies resources that will be displayed as rows in the JavaScript Scheduler.

Declaration

DayPilot.Scheduler.resources

Resource Structure

Each item in the resources array defines one Scheduler row or row group.

Required properties:

• id (string | number) specifies the resource ID. The row will display all events where the resource value matches this ID.

• name (string) specifies the resource name displayed in the default row header column.

Optional properties:

• areas (array) specifies an array of active areas.

• backColor (string) specifies the background color in CSS format.

• bubbleHtml (string) specifies static bubble HTML.

• fontColor (string) specifies the foreground color in CSS format.

• cellsAutoUpdated (boolean) refreshes cells in this row after every change (see also JavaScript Scheduler: Displaying Group Availability).

• cellsDisabled (boolean) disables all cells in this row.

• children (array) specifies an array of child resources.

• columns (array) specifies an array of row header columns. Items support html, cssClass, and backColor properties. This field is only applicable when rowHeaderColumnsMode is set to "Legacy".

• cssClass (string) specifies a custom CSS class.

• contextMenu (string | DayPilot.Menu) specifies a custom context menu.

• dynamicChildren (boolean) loads children dynamically when the row is expanded.

• emptyHeight (number) specifies the height of an empty row (see also rowEmptyHeight).

• end (DayPilot.Date) specifies a custom row end (available since 2024.3.6155).

• eventHeight (number) specifies the default event height for this resource in pixels.

• eventStackingLineHeight (number) overrides eventStackingLineHeight for this row.

• expanded (boolean) sets the tree node expanded/collapsed state.

• frozen ("top" | "bottom") freezes the row at the specified position.

• html (string) uses custom HTML 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.

• start (DayPilot.Date) specifies a custom row start (available since 2024.2.5924).

• tags (object) specifies a custom data object.

• toolTip (string) specifies the hover tooltip text.

Examples

JavaScript

Resource tree:

const dp = new DayPilot.Scheduler("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" }
  ],
  // ...
});
dp.init();

Angular

<daypilot-scheduler [config]="config"></daypilot-scheduler>

config: DayPilot.SchedulerConfig = {
  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" }
  ],
  // ...
};

React

<DayPilotScheduler
  resources={resources}
  {/* ... */}
/>

const 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" }
];

Vue

<DayPilotScheduler
  :resources="resources"
  <!-- ... -->
/>

const 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" }
];

See Also

Resource Loading [doc.daypilot.org]

DayPilot.Scheduler Class