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