DayPilot.Scheduler.rowHeaderColumns

The rowHeaderColumns property (array) specifies the row header columns displayed by the JavaScript Scheduler component.

Declaration

DayPilot.Scheduler.rowHeaderColumns

Default Value

null

Notes

Each array item defines one row header column. The following item properties are supported:

• display (string) specifies the resources[] item property that stores HTML to be displayed in the cells (tabular mode only).

• hidden (boolean) sets visibility of the column (optional; available since 2020.2.4373).

• html (string) defines optional HTML content of the row header. It is used instead of text when rendering the Scheduler in the browser, but the html value is ignored during image export.

• maxAutoWidth (number) specifies the maximum column width (in pixels) for row header width auto-fit (optional; available since 2022.4.5479).

• nonresizable (boolean) prevents the column from being user-resizable when set to true (available since 2024.3.6172); see also rowHeaderColumnsResizable.

• sort (string) specifies the resources[] item property that will be used for row sorting (optional; tabular mode only).

• text | title (string) specifies the column title.

• toolTip (string) specifies the tooltip text (available since 2023.3.5731).

• bubbleHtml (string) specifies static bubble HTML (available since 2023.3.5731); it requires rowHeaderColumnBubble to be set.

• width (number) specifies the column width in pixels (optional; if not specified, rowHeaderColumnDefaultWidth is used).

For more information about the "Tabular" and "Legacy" modes, see rowHeaderColumnsMode.

Examples

JavaScript

Scheduler config:

const dp = new DayPilot.Scheduler("dp", {
  rowHeaderColumns: [
    { text: "Name", display: "name" },
    { text: "Floor", display: "location", width: 50 },
    { text: "Type", display: "type" }
  ],
  resources: resources,
  // ...
});
dp.init();

Row data:

const resources = [
  { id: 101, name: "Room 101", location: "Floor 1", type: "single" },
  { id: 102, name: "Room 102", location: "Floor 1", type: "double" },
  { id: 201, name: "Room 201", location: "Floor 2", type: "suite" },
  { id: 202, name: "Room 202", location: "Floor 2", type: "suite" }
];

Angular

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

resources = [
  { id: 101, name: "Room 101", location: "Floor 1", type: "single" },
  { id: 102, name: "Room 102", location: "Floor 1", type: "double" },
  { id: 201, name: "Room 201", location: "Floor 2", type: "suite" },
  { id: 202, name: "Room 202", location: "Floor 2", type: "suite" }
];

config: DayPilot.SchedulerConfig = {
  rowHeaderColumns: [
    { text: "Name", display: "name" },
    { text: "Floor", display: "location", width: 50 },
    { text: "Type", display: "type" }
  ],
  resources: this.resources,
  // ...
};

React

const rowHeaderColumns = [
  { text: "Name", display: "name" },
  { text: "Floor", display: "location", width: 50 },
  { text: "Type", display: "type" }
];

const resources = [
  { id: 101, name: "Room 101", location: "Floor 1", type: "single" },
  { id: 102, name: "Room 102", location: "Floor 1", type: "double" },
  { id: 201, name: "Room 201", location: "Floor 2", type: "suite" },
  { id: 202, name: "Room 202", location: "Floor 2", type: "suite" }
];

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

Vue

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

const rowHeaderColumns = [
  { text: "Name", display: "name" },
  { text: "Floor", display: "location", width: 50 },
  { text: "Type", display: "type" }
];

const resources = [
  { id: 101, name: "Room 101", location: "Floor 1", type: "single" },
  { id: 102, name: "Room 102", location: "Floor 1", type: "double" },
  { id: 201, name: "Room 201", location: "Floor 2", type: "suite" },
  { id: 202, name: "Room 202", location: "Floor 2", type: "suite" }
];

See Also

Row Header Columns [doc.daypilot.org]

DayPilot.Scheduler.resources

DayPilot.Scheduler.rowHeaderColumnDefaultWidth

DayPilot.Scheduler.rowHeaderColumnBubble

DayPilot.Scheduler.rowHeaderColumnsMode

DayPilot.Scheduler.rowHeaderColumnsResizable

DayPilot.Scheduler Class