DayPilot.Calendar.heightSpec

The heightSpec property (string) specifies the height and grid scrolling mode of the JavaScript Calendar component.

Declaration

DayPilot.Calendar.heightSpec

Possible Values

• "BusinessHours" - calculates the height automatically to show the business hours range defined by DayPilot.Calendar.businessBeginsHour and DayPilot.Calendar.businessEndsHour. Non-business hours remain visible and a vertical scrollbar is available.

• "BusinessHoursNoScroll" - calculates the height automatically to show the business hours range, hides non-business hours, and disables vertical scrolling.

• "Full" - calculates the height automatically to show all 24 hours of the day without a vertical scrollbar.

• "Fixed" - uses the DayPilot.Calendar.height value in pixels. Non-business hours remain visible and a vertical scrollbar is available. (DayPilot Pro only)

• "Parent100Pct" - sets the calendar height to 100% of its parent element. The parent element must define its height explicitly. (DayPilot Pro only)

Default Value

"BusinessHours"

Notes

DayPilot Lite supports "BusinessHours", "BusinessHoursNoScroll", and "Full". The "Fixed" and "Parent100Pct" modes are only available in DayPilot Pro.

The "Parent100Pct" mode is useful for layouts where the calendar should fill the available vertical space of a container.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  heightSpec: "BusinessHoursNoScroll",
  // ...
});
calendar.init();

Angular

<daypilot-calendar [config]="config"></daypilot-calendar>

config: DayPilot.CalendarConfig = {
  heightSpec: "BusinessHoursNoScroll",
  // ...
};

React

<DayPilotCalendar
  heightSpec="BusinessHoursNoScroll"
  {/* ... */}
/>

Vue

<DayPilotCalendar
  heightSpec="BusinessHoursNoScroll"
  <!-- ... -->
/>

See Also

DayPilot.Calendar.height

Parent 100% Height [doc.daypilot.org]

DayPilot.Calendar Class