Forum Academy Marketplace Showcase Pricing Features

Booking system help

Im wanting to build something similar to sharetribe, where people can list services and people can book through the site, and when someone is booked that available date or time is no longer listed as “available”. Is this possible? Are there any tutorials to get me heading in the right direction? Thanks!

1 Like

This is a lot of work. Completely doable though. You’re going to become intimately familiar with date/time manipulation.

Search everything I’ve written on “date/time”.

Other folks who have built similar things include @luke2.

2 Likes

Start here: This is a good overview of understanding dates (which are times). Getting your head around this will accelerate your development a lot:

Also, while the presentation layer date stuff in Bubble is great, there’s not much you can do on the backend and this is a source of frustration initially. (For example: need to turn a date/time range into an array of date/time slots? Can’t be done in vanilla Bubble. So, send it out to an API OR do it in the page.)

This will change once one can load moment and moment-Timezone in the server, but this is not yet a thing that can be done.)

1 Like

I actually just built the basics of this today and Keith is correct, it is absolutely doable but involved. Mine supports multiple availability schedules per person, per day of week and also variable session durations, both of which complicate things.

My basic approach was to have availability ranges (ie. Monday 8:00m - 5:00pm and 8:00pm - 11:00pm) and then sessions which represent variable length bookings. To display available slots, I calculate how much time exists in the availability and split into ranges based on the session duration chosen. Then compare those against previously booked sessions to decide if it should be shown or marked as booked.

The details get deep on this one, so bring your patience, but know, it can be done!

2 Likes

Yes definitely achievable with some time and effort, but as Kieth has mentioned, on the face of it there is a lot of work involved building the project out.

My advice would be really nail down how the booking system should work, the data types involved including the fields and the conditions from both sides of the users - study sharetribe as much as can in the fine details so you have an idea of the little details that bring it all together and then make it your own.

When it comes to the calendar aspect, I recommend custom building this with a simple repeating group and a bit of JavaScript - a model I’ve followed but tweaked is @codurly’s great tutorial:

1 Like

I dont mind the work and learning. Im coming from wordpress where its all just plugins that do everything for you. I love how bubble is no code, but you still have full control of every process and how everything functions. Its been 4 days and I think im in love :joy: :joy:

Thanks for the tips, cant wait to get this figured out!!

1 Like

Did you ever get this figured out? I am starting the booking portion of my app and looking for examples etc. to help me out a bit.

Have you seen the new paid plugin from @keith?

I have seen that he submitted it but was unaware of it being made available already.

I am planning on using it, however, the help I am looking for is more in database design and the search filtering needed to show results of only listings with availability.

Essentially I am creating an appointment booking application. Appointments can be made for a single day of duration by the hour, however, appointments can be started on 15 minute intervals…so I could book a one hour appointment at 1:15PM or 1:30PM.

Whats more is the appointments can also be made to span two dates, since a user could make an appointment that begins at 11:30PM and could be for 2 hours duration and therefore ending the following day at 1:30AM.

Additionally, the appointment can be for multiple days, which means a user can book for two days or 2 weeks. Appointments that are greater than 24 hours can only be booked in intervals of 1 full day or 24 hours…so 24 hours, 48 hours, 72 hours etc. up to 4 weeks.

So far in my application I have the database created with a datatype of duration with fields for minute, hour, day and week…each has a integer and text format; text is used mostly for display purposes, the integer will be used for date math.

I also have data types for service provider, client and booking. On the booking datatype there are start and end dates as well as start and end times, plus the service provider and client. Each service provider and client datatype will have a data field for bookings. ( I’m attempting a relational database structure )

From here I am unsure of what else I would need to do. I have looked online and found some schema designs as well as some youtube videos but just need a bit more information to wrap my head around it completely.

I’m confused about how I would allow a service provider to select availability ( ie: always available on Mondays from 8AM to 9PM and always unavailable on Mondays from 9PM to 8AM or simply always unavailable on Thursdays all day. ) I’d like to not only provide search results displaying service providers who are not yet booked and available but be sure to not include in the results a service provider who is not booked but has set their availability to unavailable for the searched for day of week and time.

So, I’m thinking that I might need to create a datatype for availability with a data field of service provider and add to the service provider datatype a data field for availability.

In my mind this will just make it so that I would need to combine to searches of the service providers with filters, one for service providers:filtered by availability and the second search for service providers:filtered by not booked.

Did you manage to find a solution for this? I’ve been able to generate a list of times which reflect a user’s availability as well as the user’s available dates/days using the toolbox item expressions and list number functions, however, I haven’t been able to filter this using the date/time picker. Was wondering whether you or anyone has an idea on how I might go about doing this?

I used the date picker to have a start and end dates. Then on page I have a repeating group with the days of the week as check boxes. In each cell I also have a drop down menu linked to dynamic data I uploaded to my database which are the times of day.

I use custom states to reference the day of the week ( 0-6 ).

17%20PM

I have my database times of the day loaded with lots of information to reference for manipulation.


This all then allows me to filter and sort things based on which days of the week the user is selecting as available, while the generated list from the toolbox expressions and list of number functions provide the list of dates for the date range selected. The time slots from my database allow me to sort and filter when a user searches for a service providers availability.

It is a bit complicated but should only take a full day to figure it out…less if you already got your list of dates using the toolbox item expressions and list of number functions.

What I found is that my limited knowledge of computer programming meant the bubble time pickers were a nightmare to deal with. I constantly had issues trying to isolate just time of day to manipulate or display. In the end creating in my database the time slots has made life a lot easier.

I set up an automatic time slot creator. Just set the interval you want and press the button and it automatically generates from 12AM to 11:59PM or whatever the interval may be ( 15 minutes equals 00:15 to 11:45PM )

This lets me also save into the database the display I want to show. For example I can do 12 hour or 24 hour. I use text to display 00 properly as numbers just reduce it to 0. Also using other numbers in the database to manage calculating availability in reference to current time or time selected.

I’ve been able to achieve all of this. My issue is being able to use a date/time picker (specifically the Air date/time picker by @seanhoots) to filter the repeating group so that it shows a user’s list of times for each day. For example, when the end user clicks on a day, this should search for the list of times associated to that day. I’ve tried using a search constraint and a filter but it leaves the repeating group blank.

Days of the week are connected to numbers and so what I had done helped me with the search sorting and filtering as I was able to set custom states on the search results repeating group that are connected to a day of the week, so that when the date/time picker is used I use it’s value as a number to set my custom state, which then sets my filtered/sorted list.

If you are having issues with search results sorting and filtering I have posted a detailed explanation of how to set it up properly as it was a make or break issue for my use of bubble, and in my early days had lots of help from other community members on it.

Just adjust the search filter and sort functions to retrieve a custom state number as opposed to a database entry.

Because if you already have everything except the ability to display sorted and filtered results in a repeating group from an input value change ( ie: air date/time picker ) then the issue is more focused on how to sort and filter search results.

If that doesn’t help you out, then you should post screen shots or open the editor to be public view for community members to try and see where the issue is.

I’ve been able to achieve what I need. I’ve made a seperate post showcasing just how I’ve been able to do this.

boston85719, Did you ever get this figured out? I need help)

Yes. What is the issue you are having?

I described it here

I read through the thread. Seems like you got good advice from another user who seemed to have solved the issue. Not sure what you are still missing.

He suggested a functionality that I unfortunately do not need