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>