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

Our project widget 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 project widget, all we need to do, is changing 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="" defer></script>
<script src="" defer></script>
  window.timekitBookingConfig = {
    widgetId: '6a6c24ce-41a6-4114-9c15-de9ec3d92630',
    fullCalendar: {
      height: 800,
      slotDuration: '00:30:00'
Did this answer your question?