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

Examples

JavaScript Example

<div id="dps"></div>
<script type="text/javascript">
  var dps = new DayPilot.Scheduler("dps");
  dps.heightSpec = "Parent100Pct";
  // ...
  dps.init();
</script>

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 Example (JSP)

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