Problem on developing a Booking System (multi-users and variable availability)

[Maxime_Gadras]

Hello everyone!

I’m reaching out because I’m stuck on developing a somewhat complex functionality.

What I would like to do is to create a “booking” system for a hair salon.

The goal is to build a system that would look like Calendly. The salon’s clients should be able to go on the application, choose their hairstyle, and then select a date on a calendar, which would display the salon’s availability for the selected day.

Some details:

• Depending on the chosen hairstyle, the duration of the appointment will vary (between 1 hour and 6 hours).
• The display of availability should consider the schedules of all the salon’s hairstylists. For example, if a client chooses a hairstyle that takes 3 hours and the time slot from 11:00 AM to 12:00 PM is available, but the slot from 12:00 PM to 1:00 PM is not, the person should not be able to select the 11:00 AM slot (as there is not enough time to complete the hairstyle).

What I have done so far:

• I have created an option set called “hours” that contains all the time slots in a day, spaced by 30 minutes (9:00 AM, 9:30 AM, 10:00 AM, etc.).
• I have created a data type called “reservation” that includes a field for the hairstylist and a field for the selected time slots as a list.

This allows me to display the availability for a selected hairstylist (I simply perform a “do a search for” to check if there are any reservations with that hairstylist for the selected calendar day. If that’s the case, I remove the corresponding “hours” from the selectable time slots list based on the “reservation” data type).

The problem:

1. This method only considers the schedule of one hairstylist, not all of them.
2. It only takes into account the available “hours”. As mentioned earlier, if a client selects a hairstyle that takes 3 hours and the 9:00 AM slot is available (due to no reservation), but the 10:00 AM slot is not, the 9:00 AM slot will still be offered (even though there is not enough time available).

That’s about it. It’s quite complex, so I hope someone will take the time to understand and help with my issue, haha.

Has anyone already implemented a similar booking system or have any suggestions to offer?

Thanks in advance!

[vladimir.pak]

I did similar things for car service. It’s rather tricky and involves server side JavaScript. It’s gonna be very long read to explain it in details, but in short I created backend workflow endpoint that picks up time slot and service stations based on selected services using JavaScript logic. Then I used api connector to setup data requests to that endpoints, so that I could use it in dynamic expressions. Workflow takes cart and date range and picks up all time slots for that range. Then I use these slots to render calendar to allow user to choose one of them.

[gf_wolfer]

I know a number of people that have done this using the TopCal plugin and/or the Top Calendar template

The plugin documentation should get you most of the way around the ‘hours’ issue, but you will likely need some Javascript or the plugin for it to work.

For the Search part with multiple hair stylists, this one gets trickier but one method to do this is explained here: Searching for "who's available" (I'm using TopCal plugin) - #14 by bizyland
Also some other tips on this type of searching are buried in this thread New Plugin: TopCal - Dates, Ranges and Time Slots - #170 by gf_wolfer

[Maxime_Gadras]

Hi guys @gf_wolfer @vladimir.pak,

Thank you very much for the tips and sorry for the late reply !

I’ve made good progress thanks to your instructions.

I decided to take the topcal plugin and simplify my use case by going back to something less complex.

I now have a “Booking” datatype that contains several fields:

• Start-time (date)
• End-time (date)
• Date_Range (date range, which stores the interval between start-time and end-time)
• Day (date, which stores the reservation date)

On my page, I have a calendar that lets me choose a date, and next to it a repeating group that displays a list of timeslots (thanks to the topcal element).

When the user clicks on a date in the calendar, I perform a ‘do a search for’ which will search for all “booking” data types whose field date is the selected date.

I then store the “Date_range” of each data type in the list in a custom state on my page.

Conclusion:

So I have a list of Date_range and a repeating group with a list of dates (timeslots).

I’m stuck on one last point: I need to be able to filter the display of timeslots according to the list of date_ranges present in my custom state.

The idea would be to apply a filter to the repeating group: “Do a search for timeslots —> condition —> only if this timeslot is NOT contained in ONE of the date_range from the custom state list”.

The idea is that the RG would display only timeslot that are not contained in the range of one of the bookings already created by users.

I know that I should use “contains point”, maybe ? That would be easy if I was checking only one date range, but here is a list of date range…

I’ve been looking for days but I’m completely stuck… I think I’m taking the problem the wrong way.

Any suggestions?

[gf_wolfer]

Since you are using the TopCal plugin have you looked at just using the Booked Ranges field in the Get Available Times element?

Videos and examples how to use it here: TopCal Plugin