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)

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>

React Scheduler

The height of the React Scheduler component can be specified using heightSpec and height attributes of the <DayPilotScheduler> tag:

<DayPilotScheduler
  heightSpec={"Max"}
  height={250}
/>

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.

Angular Scheduler

The Angular Scheduler component height can be configured using heightSpec and height properties of the config object.

import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from 'daypilot-pro-angular';

@Component({
  selector: 'scheduler-component',
  template: `<daypilot-scheduler [config]="config"></daypilot-scheduler>`,
  styles: [``]
})
export class SchedulerComponent implements AfterViewInit {

  config: DayPilot.SchedulerConfig = {
    heightSpec: "Max"
    height: 500,
    // ...
  };

}

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.

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