The HeightSpec property specifies how the control height will be determined.

Supported values:

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

DayPilot Lite supports the following modes:

  • BusinessHours (default)
  • Full

BusinessHours

calendar-heighspec-businesshours.png

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

BusinessHoursNoScroll

calendar-heighspec-businesshoursnoscroll.png

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

Fixed

calendar-heighspec-fixed.png

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

Full

calendar-heighspec-full.png

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

Parent100Pct

calendar-heighspec-fixed.png

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

See also 100% height.

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

JavaScript

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

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>