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>