User documentation

  1. Home
  2. User documentation
  3. Display Pack
  4. Set up calendars display

Set up calendars display

You can configure the booking method and the calendar appearence of each booking form, in their “Calendar” field settings:

  • Go to Booking Activities > Booking forms > your form
  • Go to the “Calendar” field settings

Display tab

  • Booking method: Choose how to display the events
    • Calendar: Display the events on a FullCalendar calendar (default)
    • Waterfall: Display a jQuery UI datepicker and an event selectbox instead of the default calendar
  • Datepicker display
    • Popup: The customer must click on the field to display the datepicker (default)
    • Inline: The datepicker will be directly displayed
  • Hide event selectbox
    • Never: Always ask customer to select date AND event (default)
    • When only one event is available: The customer will only have to select the date (the event will be automatically selected)
  • Days to hide: Check the days you want to hide. No events will be displayed on those days.


Calendar tab

You need to click on “Show advanced options” to display all the available options.


  • Height: You can set a fixed height in pixel for your whole calendar (including header) or leave it blank to use aspect ratio. Set it to ‘auto‘ to adjust its size automatically (default and recommended)
  • Content Height: Same as Height, but it affect the calendar’s height only (whithout header)
  • Aspect Ratio: Width to Height ratio. If height and content height are empty, the aspect ratio is applied
  • Handle windows resize: your calendar size should adapt to window’s size? The calendar height must be set by aspect ratio for this to work.


  • Initial view: The calendar can be loaded on a specific view according to its width (learn more)
  • Available views: Users will be able to switch between the views you pick here
  • Flexible views duration: Set the “Flexible” views duration in days
    • Warning: Hidden days will be omitted
  • Multiple Months views duration: Set the “Multiple Months” views duration in months
  • Link Dates: Clicking on a date will take you to the related day view

Time Grid and Day Grid views

These settings applies to “Time Grid” and “Day Grid” views only.

  • Week number: Whether to display the week number
  • Now indicator: Display a marker on calendar indicating current time
  • Events overlap: Whether to allow events to visually overlap when they are on the same schedule

Time Grid views

These settings applies to “Time Grid” views only.

  • Timeslot frequency: Show a timeslot on the left of calendars every X minutes
  • Scroll time: If the calendar’s height is limited a scrollbar appears. You can set the initial scroll with this option

Day Grid views

These settings applies to “Day Grid” views only.

  • Event limit: The max number of event to show in Day Grid views. Beyond this limit, a “View more” link will be displayed
  • Event limit click: Action to perform when users click on the “View more” link
    • Popup: Display a small dialog with the full list of events (default)
    • Week: Go to the corresponding week view
    • Day: Go to the corresponding day view
  • Show prev. / next months events.: Whether to render events of previous and next months in “Day Grid – Month” view

How can we help?