Height

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

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

BusinessHoursNoScroll

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

Fixed

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

Full

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

Parent100Pct

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

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

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

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