Rendering timeslot increments properly

How to get overlapping timeslots rendered properly

d
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!

<script>
// 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(response.data.length == 0){
         return;
       }
       var start = new Date(response.data[0].start);
       var end = new Date(response.data[0].end);
       lengthInMinutes = Math.round((end.getTime()-start.getTime())/60000);
       var numResponses = response.data.length;
       for(var i=0; i<numResponses; i++){
          start = new Date(response.data[i].start);
          start.setMinutes(start.getMinutes()+incrementInMinutes);
          response.data[i].end = start
        }
     },
     showBookingPage:function(event) {
      event.end = moment(event.start).add(lengthInMinutes, 'minutes');
     }
   }
  }
</script>
Did this answer your question?