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 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("dps"); 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("dps"); dps.heightSpec = "Parent100Pct"; // ... dps.init(); </script> </body> ...
Related Topics
See also
JavaScript
Example
<div id="dps"></div> <script type="text/javascript"> var dps = new DayPilot.Scheduler("dps"); dps.heightSpec = "Parent100Pct"; // ... dps.init(); </script>
React
Example:
<div style={{position: "absolute", top: "50px", left: "0px", right: "0px", bottom: "0px"}}> <DayPilotScheduler heightSpec={"Parent100Pct"} ref={component => { this.scheduler = component && component.control; }} /> </div>
Tutorial:
Angular
Tutorial:
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 (JSP)
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>