100% Height

The heightSpec property can be set to "Parent100Pct". This will set the total Scheduler height to 100% of its parent element. Please note that the parent height must be set explicitly so the Scheduler can fill it.

1. The best way to set the parent height is to use the top and bottom styles:

<style>
  #parent {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
  }
</style>

...

<div id="parent">
  <div id="dp"></div>
</div>

<script type="text/javascript">
  var dps = new DayPilot.Scheduler("dp");
  dps.heightSpec = "Parent100Pct";
  // ...
  dps.init();
</script>

2. You can also use height: 100% for the parent element. In this case, all the ancestors of the parent element must specify the height as well (including <html> and <body>):

<style type="text/css">
html, body, #parent {
  height:100%;
}
</style>

...

<body>

  <div id="parent">
    <div id="dp"></div>
  </div>


  <script type="text/javascript">
    var dps = new DayPilot.Scheduler("dp");
    dps.heightSpec = "Parent100Pct";
    // ...
    dps.init();
  </script>

</body>

...

JavaScript

Example

<div id="dps"></div>
<script type="text/javascript">
  var dps = new DayPilot.Scheduler("dp");
  dps.heightSpec = "Parent100Pct";
  // ...
  dps.init();
</script>

API: heightSpec.

The following examples place the Scheduler in a 500-pixel-high container so you can try Parent100Pct without changing the page layout.

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

Angular

The component template supplies the containing div; config.heightSpec selects Parent100Pct.

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

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <div style="height: 500px;">
    <daypilot-scheduler [config]="config"></daypilot-scheduler></div>
  `
})
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"}, {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"}],
    heightSpec: "Parent100Pct"
  };

}

Angular Scheduler: Full Screen Layout

React

Set the container height through React's style object and pass heightSpec directly to DayPilotScheduler.

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

export default function SchedulerExample() {

  return <div style={{height: "500px"}}>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      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"}]}
      heightSpec={"Parent100Pct"}
    />
  </div>;
}

React Scheduler: Full Screen Layout

Vue

Keep the container style in the template and bind the heightSpec value declared in <script setup>.

<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"}, {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 heightSpec = "Parent100Pct";

</script>

<template>
  <div style="height: 500px;">

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

ASP.NET WebForms

Example:

<DayPilot:DayPilotScheduler 
  runat="server" 
  id="DayPilotScheduler1"
  HeightSpec="Parent100Pct"
  ...
/>

ASP.NET MVC

Example:

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

Java

Example:

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

Availability

Availability of this feature in DayPilot editions:

Product	Lite	Pro
DayPilot for JavaScript
DayPilot for ASP.NET WebForms
DayPilot for ASP.NET MVC
DayPilot for Java