The heightSpec property can be set to "Parent100Pct". This will set the total Calendar height to 100% of its parent element.
In order to fill the browser window with the Calendar control, the parent height must be set explicitly.
1. The easiest way is to use position: absolute style in combination with top and bottom CSS properties:
<style type="text/css"> .fullscreen { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; } </style>
2. You can also define the parent element height using height: 100% style. In this case, don't forget to set the height of all parent elements (including <html> and <body>) explicitly as well:
<style type="text/css"> html, body { height:100%; } .fullheight { height: 100%; } </style>
Related Topics
JavaScript
Example:
<div id="dpc"></div> <script type="text/javascript"> var dpc = new DayPilot.Calendar("dpc"); dpc.heightSpec = "Parent100Pct"; // ... dpc.init(); </script>
Angular
Tutorial:
ASP.NET WebForms
Example:
<DayPilot:DayPilotCalendar runat="server" id="DayPilotCalendar1"
HeightSpec="Parent100Pct"
...
/>
ASP.NET MVC
Example:
@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { BackendUrl = ResolveUrl("~/Scheduler/Backend"), HeightSpec = HeightSpec.Parent100Pct, ... })
Java (JSP)
Example:
<div id="dpc"></div> <script type="text/javascript"> var dpc = new DayPilot.Scheduler("dpc"); dpc.backendUrl = "${pageContext.request.contextPath}/dpc"; dpc.heightSpec = "Parent100Pct"; // ... dpc.init(); </script>