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