Height

The Scheduler component supports several modes for specifying the height (heightSpec property):

• Max (default; the height will grow as in Auto mode up to the value specified in Height property; than the height will be fixed and scrollbar added)

• Auto (the height will be determined by row heights, no scrollbar is added)

• Fixed (the Height property value will be used, scrollbar is added when necessary)

• Parent100Pct (the height will be set to 100% of the parent element)

• Max100Pct (the height will grow until 100% of the parent element is reached)

The Lite edition supports "Auto", "Max", and "Fixed" modes.

JavaScript Scheduler

The JavaScript Scheduler lets you configure the height using heightSpec and height properties:

<div id="scheduler"></div>
<script>
  const scheduler = new DayPilot.Scheduler("scheduler", {
    heightSpec: "Max",
    height: 400,
    // ...
  });
  scheduler.init();
</script>

API: heightSpec, height.

The framework examples use 50 rooms and a fixed 300-pixel viewport to demonstrate vertical scrolling.

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

Angular

Set heightSpec and the numeric height in the typed configuration bound to [config].

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: Array.from({length: 50}, (_, i) => ({id: "R" + i, name: "Room " + (i + 1)})),
    events: [],
    heightSpec: "Fixed",
    height: 300
  };

}

See the Angular Scheduler: Full Screen Layout tutorial and download an Angular project that shows how to set the Angular Scheduler height to 100% of the parent element.

React

Use heightSpec="Fixed" and height={300} as component props; the resource array is passed separately.

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={Array.from({length: 50}, (_, i) => ({id: "R" + i, name: "Room " + (i + 1)}))}
      events={[]}
      heightSpec={"Fixed"}
      height={300}
    />
  </div>;
}

The React Scheduler: Full Screen Layout tutorial displays a React Scheduler set to fill the available vertical space using heightSpec={"Parent100Pct"}. You can use this setting to integrate the Scheduler into applications that use a single screen UI without a vertical scrollbar.

Vue

The template binds :heightSpec and :height to the values in <script setup>, preserving the numeric height.

<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 = Array.from({length: 50}, (_, i) => ({id: "R" + i, name: "Room " + (i + 1)}));
const events = [];
const heightSpec = "Fixed";
const height = 300;

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :heightSpec="heightSpec"
      :height="height"
    />
  </div>
</template>

<DayPilot:DayPilotScheduler 
  runat="server" 
  id="DayPilotScheduler1"
  HeightSpec="Max"
  Height="250"
  ...
/>

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  Height = 300,
  HeightSpec = HeightSpec.Max,
  ...
})

<div id="dps"></div>
<script type="text/javascript">
  var dps = new DayPilot.Scheduler("dps");
  dps.backendUrl = "${pageContext.request.contextPath}/dps";
  dps.heightSpec = "Max";
  dps.height = 250;
  // ...
  dps.init();
</script>