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
The total height didn't reach 250 pixels. No vertical scrollbar is visible.
2) Tree expanded
The total height is bigger than 250 pixels, a vertical scrollbar is added.