Row Header Width Auto-Fit

The row header width can be adjusted automatically to fit the longest text. This feature is enabled by default.

The initial width of row header columns is set using the width property of the column data item (rowHeaderColumns):

{
  rowHeadersColumns: [
    {text: 'Name', display: "name"},
    {text: 'Floor', display: "location", width: 60},
    {text: 'Size', display: "size"}
  ],
  // ...
}

If the width is not specified, the Scheduler uses the value of rowHeaderColumnDefaultWidth property as the default width.

When row header width auto-fit is enabled, the column width is extended automatically after the rows are loaded. The Scheduler measures the width of the column content (including padding) and increases the width if necessary.

There is no upper limit of the column width but you can apply one by specifying maxAutoWidth (per column). This option is available since version 2022.4.5479.

{
  rowHeaderColumns: [
    {text: "Name", maxAutoWidth: 200},
    // ...
  ],
  // ...
}

By default, the column width doesn't shrink automatically. If you want the columns to be shrunk, you need to enable this feature using rowHeaderWidthAutoFitShrink property:

{
  rowHeaderWidthAutoFitShrink: true,
  // ...
}

Note: This feature can cause performance problems if you display a large number of resources with progressive row rendering disabled.

JavaScript Scheduler

To turn the row header width auto-fit feature off in the JavaScript Scheduler component, set the rowHeaderWidthAutoFit property to false:

<div id="dp"></div>
<script>
  const dp = new DayPilot.Scheduler("dp", {
    rowHeaderWidthAutoFit: false,
    // ...
  });
  dp.init();
</script>

Angular Scheduler

In the Angular Scheduler component, you can enable the row header width auto-fit using rowHeaderWidthAutoFit and rowHeaderWidthAutoFitShrink properties of the config object:

import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from 'daypilot-pro-angular';

@Component({
  selector: 'scheduler-component',
  template: `<daypilot-scheduler [config]="config"></daypilot-scheduler>`,
  styles: [``]
})
export class SchedulerComponent implements AfterViewInit {

  config: DayPilot.SchedulerConfig = {
    rowHeaderWidthAutoFit: true,
    rowHeaderWidthAutoFitShrink: true,
    // ...
  };

}

React Scheduler

You can use the rowHeaderWidthAutoFit and rowHeaderWidthAutoFitShrink attributes of the <DayPilotScheduler> tag to enable/disabled the row header width auto-fit in the React Scheduler component.

import React from 'react';
import {DayPilotScheduler} from "daypilot-pro-react";

function Scheduler() {

  return (
    <div>
      <DayPilotScheduler
        rowHeaderWidthAutoFit={true}
        rowHeaderWidthAutoFitShrink={true}
      />
    </div>
  );

}

export default Scheduler;

Vue Scheduler

In Vue Scheduler, use the rowHeaderWidthAutoFit and rowHeaderWidthAutoFitShrink properties of the config object.

<template>
  <DayPilotScheduler id="dp" :config="config" />
</template>

<script setup>
import {DayPilotScheduler} from 'daypilot-pro-vue'

const config = {
  rowHeaderWidthAutoFit: true,
  rowHeaderWidthAutoFitShrink: true,
  // ...
};

</script>

<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  RowHeaderWidthAutoFit = "false"
/>

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  RowHeaderWidthAutoFit = false
})