Row Header Column Resizing

The JavaScript Scheduler component can display multiple columns in the row header.

By default, the columns can be resized using drag handles displayed between the column titles at the top.

You can disable the columns resizing option:

• globally using the rowHeaderColumnsResizable property (set the value to false to disable resizing)

• per column, using the nonresizable property of rowHeaderColumns array items

Scheduler config:

{
  // ...
  rowHeaderColumnsResizable: true,
  rowHeaderColumns: [
      {text: 'Name', display: "name", nonresizable: true},
      {text: 'Floor', display: "location"},
      {text: 'Size', display: "size"}
  ],
  // ...
}

When the user completes the resizing, the Scheduler fires the onRowHeaderColumnResized handler.

You can use this event handler to store the new widths. The rowHeaderColumns property will contain the updated widths.

Scheduler config:

{
  // ...
  onRowHeaderColumnResized: args => {
    console.log("rowHeaderColumns", scheduler.rowHeaderColumns);
  },
  // ...
}