Adjusting the Booking Widget height

Need more space for the events in your booking widget? Here's how to achieve that.

d
Written by derrick mak
Updated over a week ago

Start by reading this introduction article on how to make booking widget customizations. Once you feel comfortable making config code changes, you can continue here.

Our booking widget is built upon the open source library FullCalendar which means that we can leverage the all functionality that FullCalendar provides. And because FullCalendar renders the calendar view in the booking widget, all we need to do, is change a few settings there.

Full widget height

The height of the project widget is by default calculated dynamically based on a number of form fields and whether we're in mobile mode (list view) or desktop mode (agenda view).

You can, however, override it with a fixed pixel value like this:

fullcalendar: {
  height: 800
}

Slot duration height

The height of each time unit i.e. the pixel height per hour is automatically set so that it's not too small to have clickable surface area nor too high to take too much space.

If you want to fiddle with it yourself and override the default, try passing the following setting to the config:

fullcalendar: {
  slotDuration: '00:45:00'
}

Read the documentation here. Note: this only applies to the agenda view (desktop mode)

Full example

<div id="bookingjs"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" defer></script>
<script src="https://cdn.timekit.io/booking-js/v1/booking.min.js" defer></script>
<script>
  window.timekitBookingConfig = {
    app_key: 'live_widget_key_yYXHsUurvCUctNYflzGDMqEJo6mol0Yo',
    resources: [],
    fullcalendar: {
      height: 800,
      slotDuration: '00:30:00'
    }
  }
</script>
Did this answer your question?