DayPilot.Scheduler.onBeforeRowHeaderColumnRender

The onBeforeRowHeaderColumnRender event handler fires before the Scheduler row header columns are rendered. It lets you customize the header cells at the top of the row header area; to customize row-specific header data, use DayPilot.Scheduler.onBeforeRowHeaderRender.

Available since 2020.1.4266.

Declaration

DayPilot.Scheduler.onBeforeRowHeaderColumnRender(args)

Parameters

• args.column.areas (array of DayPilot.Area Properties) - active areas displayed in the column header

• args.column.cssClass (string) - CSS class added to the header cell (available since 2021.3.5045)

• args.column.data (object) - source column data from DayPilot.Scheduler.rowHeaderColumns (read-only)

• args.column.html (string) - raw HTML displayed in the header cell (read/write)

• args.column.sortingEnabled (boolean) - shows or hides the sort icon; the default value is true; ignored if row sorting is not enabled for this column

• args.column.toolTip (string) - tooltip text (available since 2023.3.5731)

Notes

The args.column.data object gives you access to the original DayPilot.Scheduler.rowHeaderColumns configuration, so you can adjust the rendered header based on the configured column metadata.

Use this event for the column headers at the top of the row header area. To customize row header cells for individual resources or rows, use DayPilot.Scheduler.onBeforeRowHeaderRender.

Examples

JavaScript

const dp = new DayPilot.Scheduler("dp", {
  rowHeaderColumns: [
    { name: "Name", display: "name", sort: "name" },
    { name: "Capacity", display: "capacity", sort: "capacity" }
  ],
  resources: [
    { name: "Resource 1", id: 1, capacity: 20 },
    { name: "Resource 2", id: 2, capacity: 10 }
  ],
  onBeforeRowHeaderColumnRender: (args) => {
    if (args.column.data.name === "Capacity") {
      args.column.sortingEnabled = false;
    }
  },
  // ...
});
dp.init();

Angular

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

config: DayPilot.SchedulerConfig = {
  rowHeaderColumns: [
    { name: "Name", display: "name", sort: "name" },
    { name: "Capacity", display: "capacity", sort: "capacity" }
  ],
  resources: [
    { name: "Resource 1", id: 1, capacity: 20 },
    { name: "Resource 2", id: 2, capacity: 10 }
  ],
  onBeforeRowHeaderColumnRender: (args) => {
    if (args.column.data.name === "Capacity") {
      args.column.sortingEnabled = false;
    }
  },
  // ...
};

React

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

const rowHeaderColumns = [
  { name: "Name", display: "name", sort: "name" },
  { name: "Capacity", display: "capacity", sort: "capacity" }
];

const resources = [
  { name: "Resource 1", id: 1, capacity: 20 },
  { name: "Resource 2", id: 2, capacity: 10 }
];

const onBeforeRowHeaderColumnRender = (args) => {
  if (args.column.data.name === "Capacity") {
    args.column.sortingEnabled = false;
  }
};

Vue

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

const rowHeaderColumns = [
  { name: "Name", display: "name", sort: "name" },
  { name: "Capacity", display: "capacity", sort: "capacity" }
];

const resources = [
  { name: "Resource 1", id: 1, capacity: 20 },
  { name: "Resource 2", id: 2, capacity: 10 }
];

const onBeforeRowHeaderColumnRender = (args) => {
  if (args.column.data.name === "Capacity") {
    args.column.sortingEnabled = false;
  }
};

See Also

Row Header Columns [doc.daypilot.org]

DayPilot.Scheduler.onBeforeRowHeaderRender

DayPilot.Scheduler.rowHeaderColumns

DayPilot.Scheduler Class