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>