Row Header Scrolling

You can enable a horizontal scrollbar for the JavaScript Scheduler row headers. The row header container will have the specified width, regardless of the total column width. It lets you display a much larger number of columns in the Scheduler headers, without making the main grid smaller.

• Row header columns need to be specified. The inner width will be calculated as a sum of column widths.

• The value specified using rowHeaderWidth will be used for the total width.

• This option can be combined with the row header width auto-fit feature.

• This option also activates a splitter between row headers and the scheduler grid. This lets users resize the row header container.

JavaScript

To enable the horizontal scrollbar for the row header, set the rowHeaderScrolling property to true:

const scheduler = new DayPilot.Scheduler("dp", {
  rowHeaderScrolling: true,
  // ...
});
scheduler.init();

Demo

• Scheduler Row Header Scrolling (Demo)

API: rowHeaderScrolling, rowHeaderWidth, rowHeaderColumns.

The examples place 180-pixel and 240-pixel columns inside a 220-pixel-wide header container. rowHeaderScrolling makes the remaining column content accessible without expanding the container to their combined width.

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: "Room A", description: "Video conference equipment"}, {id: "B", name: "Room B", description: "Presentation screen and whiteboard"}],
    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"}],
    rowHeaderScrolling: true,
    rowHeaderWidth: 220,
    rowHeaderColumns: [{text: "Room", display: "name", width: 180}, {text: "Description", display: "description", width: 240}]
  };

}

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: "Room A", description: "Video conference equipment"}, {id: "B", name: "Room B", description: "Presentation screen and whiteboard"}]}
      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"}]}
      rowHeaderScrolling={true}
      rowHeaderWidth={220}
      rowHeaderColumns={[{text: "Room", display: "name", width: 180}, {text: "Description", display: "description", width: 240}]}
    />
  </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: "Room A", description: "Video conference equipment"}, {id: "B", name: "Room B", description: "Presentation screen and whiteboard"}];
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 rowHeaderScrolling = true;
const rowHeaderWidth = 220;
const rowHeaderColumns = [{text: "Room", display: "name", width: 180}, {text: "Description", display: "description", width: 240}];

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :rowHeaderScrolling="rowHeaderScrolling"
      :rowHeaderWidth="rowHeaderWidth"
      :rowHeaderColumns="rowHeaderColumns"
    />
  </div>
</template>