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.
The widget is primarily designed for short time slots that fit within a week/agenda view, i.e. 30 minutes to 6 hours.
If you have a use case where you want to expose all-day events, you can tweak the booking widget to show a month view instead. This is ideal for use-cases like rentals where resources are rented out on a day-by-day basis.
How we'll achieve this:
Make sure that only 1 timeslot can fit within the availability constraints per day.
Make FullCalendar use the month view instead of agenda view
If you're embedding booking widgets that you created through our admin, your code should look something like this:
<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/v2/booking.min.js" defer></script>
<script>
window.timekitBookingConfig = {
app_key: 'live_widget_key_yYXHsUurvCUctNYflzGDMqEJo6mol0Yo',
project_id: '<your-project-id-here>',
availability: {
length: '8 hours',
from: 'tomorrow'
},
availability_constraints: [
{
allow_hours: { 'start': 9, 'end': 17 }
}
],
fullcalendar: {
defaultView: 'month'
}
}
</script>
Remember to replace the app_key and project_id with your own and you are good to go 👌
Note: the visual result is not ideal as timeslots are still shown with their start time, but if you can live with that, it should work just fine.