DayPilot Scheduler 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 Example

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

React

Example:

<DayPilotScheduler
  heightSpec={"Max"}
  height={250}
  ref={component => {
    this.scheduler = component && component.control;
  }}
/>

Tutorial:

Angular

ASP.NET WebForms Example

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

ASP.NET MVC Example

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

Java Example (JSP)

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

HeightSpec = "Max" Display Example

1) Tree collapsed

dps max collapsed656x265

The total height didn't reach 250 pixels. No vertical scrollbar is visible.

2) Tree expanded

dps max expanded656x299

The total height is bigger than 250 pixels, a vertical scrollbar is added.