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
}Read the documentation here.
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>