Skip to main content
Rendering timeslot increments properly

How to get overlapping timeslots rendered properly

Written by derrick mak
Updated over a week ago

Start by reading our introduction article to widget customizations here.

Since the booking.js widget default renders time-slots as long as the "length" parameter, we need to configure it to render time-slots shorter, when the timeslot_increments setting is used.

This example is for a timeslot_increments setting of 15 minutes. Please note the comment on start.setMinutes!

// Global variables, change the value to your preferred increment
var lengthInMinutes;
var incrementInMinutes = 15;

// Widget config
window.timekitBookingConfig = {
    availability: {
       timeslot_increments: incrementInMinutes + ' minutes'
    callbacks: {
     fetchAvailabilitySuccessful: function(response) {
       if( == 0){
       var start = new Date([0].start);
       var end = new Date([0].end);
       lengthInMinutes = Math.round((end.getTime()-start.getTime())/60000);
       var numResponses =;
       for(var i=0; i<numResponses; i++){
          start = new Date([i].start);
[i].end = start
     showBookingPage:function(event) {
      event.end = moment(event.start).add(lengthInMinutes, 'minutes');
Did this answer your question?