How to show available time slot by date

Need help
1

I’m currently building a Pet Grooming reservation platform. For each collaborateur, they have default availability during opening hours. However, when a reservation is made, it should create an unavailability period with the start and end times.

I’m facing difficulties in constructing the booking page for the availability section. I wanted to use a repeating group to display dates and timeslot, but I haven’t been able to figure it out. Does anyone have any advice or can recommend an accessible plugin? I try to do something like this :

Capture d’écran 2023-07-12 à 20.51.21
Capture d’écran 2023-07-12 à 20.51.211996×1304 164 KB

Please note that I’m not considering templates. Thank you in advance.

2

I put together some videos and an open/free app so you can see how I would structure things for an app like this - TopCal Plugin

This example uses my TopCal plugin but a lot of the Database strategies and logic can be used whether you use the plugin or not. I highly recommend the plugin, especially if Time Zone accuracy and Workflow Unit efficiency are important, but if you have experience with javascript and/or a lot of time then you can always give it a shot without the plugin

3

Did you ever figure this out?