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):

{
  rowHeaderColumns: [
    {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>

API: rowHeaderWidthAutoFit, rowHeaderWidthMarginRight.

The framework examples fit the resource names automatically and reserve an additional 20 pixels using rowHeaderWidthMarginRight.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Large conference room"}, {id: "B", name: "Small meeting room"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    rowHeaderWidthAutoFit: true,
    rowHeaderWidthMarginRight: 20
  };

}

React

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

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Large conference room"}, {id: "B", name: "Small meeting room"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      rowHeaderWidthAutoFit={true}
      rowHeaderWidthMarginRight={20}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Large conference room"}, {id: "B", name: "Small meeting room"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const rowHeaderWidthAutoFit = true;
const rowHeaderWidthMarginRight = 20;

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :rowHeaderWidthAutoFit="rowHeaderWidthAutoFit"
      :rowHeaderWidthMarginRight="rowHeaderWidthMarginRight"
    />
  </div>
</template>

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

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