Auto Cell Width

The Scheduler component can calculate the cell width to match the Scheduler width:

• The timeline fits the available width unless the configured minimum cell width requires more space.
• The available space is filled with content - there is no free space on the right side if the viewport is too wide.
• The cell width is updated automatically on window resize.

JavaScript

You can enable the auto cell width feature using cellWidthSpec property:

dp.cellWidthSpec = 'Auto';

This mode will calculate the cell width from the Scheduler width on initial load, during updates and when the available grid width changes. The calculated width will be stored in cellWidth property.

You can also specify the minimum width (in pixels) using cellWidthMin property:

dp.cellWidthMin = 20;   // default value = 1

The minimum width takes precedence over fitting the full timeline. If the cells cannot fit at that width, the Scheduler displays a horizontal scrollbar. Reduce the minimum width or shorten the date range to fit more of the timeline.

Demo

• JavaScript Scheduler: Auto Cell Width Demo

API: cellWidthSpec, cellWidthMin.

The framework examples fit a week into the available grid width while keeping each cell at least 50 pixels wide. A narrower container requires horizontal scrolling once that minimum is reached.

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: 7,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    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"}],
    cellWidthSpec: "Auto",
    cellWidthMin: 50
  };

}

React

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

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={7}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      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"}]}
      cellWidthSpec={"Auto"}
      cellWidthMin={50}
    />
  </div>;
}

Vue

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

const startDate = "2026-11-01";
const days = 7;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
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 cellWidthSpec = "Auto";
const cellWidthMin = 50;

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :cellWidthSpec="cellWidthSpec"
      :cellWidthMin="cellWidthMin"
    />
  </div>
</template>

ASP.NET WebForms

CellWidthSpec = "Auto"

Demo

• http://www.daypilot.org/demo/Scheduler/AutoCellWidth.aspx

ASP.NET MVC

.CellWidthSpec = Auto

Demo

• http://mvc.daypilot.org/demo/Scheduler/AutoCellWidth