You can specify the height mode of the JavaScript Calendar component using the heightSpec property.

Supported values:

  • "BusinessHours" (default)
  • "BusinessHoursNoScroll"
  • "Fixed"
  • "Full"
  • "Parent100Pct"

The open-source DayPilot Lite version supports the following modes:

  • "BusinessHours" (default)
  • "BusinessHoursNoScroll"
  • "Full"

BusinessHours

calendar heighspec businesshours

  • Height: Calculated automatically to show the business hours range defined using BusinessBeginsHour and BusinessEndsHour.
  • Non-business hours: visible
  • Scrollbar: visible

BusinessHoursNoScroll

calendar heighspec businesshoursnoscroll

  • Height: Calculated automatically to show the business hours range defined using BusinessBeginsHour andBusinessEndsHour.
  • Non-business hours: hidden
  • Scrollbar: hidden

Fixed

calendar heighspec fixed

  • Height: Specified in Height property (pixels).
  • Non-business hours: visible
  • Scrollbar: visible

Full

calendar heighspec full

  • Height: Calculated automatically to show all 24 hours of a day.
  • Non-business hours: visible
  • Scrollbar: hidden

Parent100Pct

calendar heighspec fixed

  • Height: 100% of the parent element.
  • Non-business hours: visible
  • Scrollbar: visible

See also 100% height.

JavaScript

Example:

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp");
  dp.heightSpec = "Fixed";
  dp.height = 400
  // ...
  dp.init();
</script>

Java (JSP)

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp");
  dp.backendUrl = "${pageContext.request.contextPath}/dpc";
  dp.heightSpec = "Fixed";
  dp.height = 400;
  // ...
  dp.init();
</script>

ASP.NET WebForms

<DayPilot:DayPilotCalendar runat="server" id="DayPilotCalendar1"
  ...
  HeightSpec = "Fixed"
  Height="400"
/>

Demo

ASP.NET MVC

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig {
  BackendUrl = ResolveUrl("~/Calendar/Backend"),
  ...
  HeightSpec = HeightSpec.BusinessHours,
  Height = 400
})

AngularJS

<div ng-app="main" ng-controller="CalendarController" >
  <daypilot-calendar id="calendar" daypilot-config="calendarConfig" daypilot-events="events" ></daypilot-calendar> 
</div>
<script>
    var app = angular.module('main', ['daypilot']).controller('CalendarController', ['$scope', '$timeout', '$http', function($scope, $timeout, $http) {
      $scope.calendarConfig = {
          viewType: "Week",
          businessBeginsHour: 10,
          businessEndsHour: 18,
          heightSpec: "Full",
          startDate: DayPilot.Date.today()
      };
      
      $scope.events = [];
    }]);
</script>