[Tips] Let Users setup their daily availabilities

ambroisedlg · 2020-06-18T23:10:48.859Z

Hey guys

It seems like quite a few of us are wondering how to let Users setup their daily availabilities. This is useful if your app involves appointment scheduling or business opening/closing hours for example.

I wasn’t sure if there was a similar topic out there so here is a demo of how I got it to work:
Demo: https://calendar-schedule.bubbleapps.io/version-test/create-user?debug_mode=true
Editor: https://bubble.io/page?type=page&name=create-user&id=calendar-schedule&tab=tabs-1

A few things to keep in mind:

This demo is not on a paid plan therefore the loading time when ‘Start’ is clicked is very long. You can make this seamless by creating the availabilities in an API workflow instead
This is certainly not the only way to do it, so if anyone has suggestions to make it better please feel free to share

Here are a few extra guidelines:

You need to create a data type Availabilities with the following fields:

Available (of type yes/no)
Day (of type text)
DayNumber (of type number)
OpeningHour (of type date)
ClosingHour (of type date)

Add a field Availabilities (list of Availabilities ) to your User data type
When User is created, create 7 new Availabilities (one for each day) and add them to User’s Availabilities

Day: Sunday; Monday; Tuesday and so on
DayNumber: 0; 1; 2; 3; 4; 5; 6 (Sunday = 0; Monday = 1, Tuesday= 2 and so on)

To let the User define his availabilities, create a RG (7 rows, 1 column) and set the data source to Current User’s Availabilities . Each row is one day. Include the following elements in the first cell, from left to right:

1 checkbox (set to Dynamic: Current cell’s Availabilities’ Available )
1 text (set to Current cell’s Day )
2 date/time pickers, one for the OpeningHour and the other for the ClosingHour - I recommend using this plugin by @seanhoots

Create following workflows:

When checkbox’s value is changed and checkbox is checked > Make changes to Current cell’s Availabilities: Available = yes
In the same way, when checkbox’s value is changed and checkbox is unchecked > Make changes to Current cell’s Availabilities: Available = no
When AirDate/TimePicker A’s value is changed > Make changes to Current cell’s Availabilities: OpeningHour = This AirDate/TimePicker’s value
In the same way, when AirDate/TimePicker B’s value is changed > Make changes to Current cell’s Availabilities: ClosingHour = This AirDate/TimePicker’s value

Hope this helps and happy to answer any questions you might have

mauraduquette · 2020-06-19T00:39:40.863Z

Thank you!

When the availability is changed, does it automatically update the data (so no need for a ‘‘Save’’ button for changes)?

Thanks again

ambroisedlg · 2020-06-19T00:49:52.543Z

Yes that’s right @mauraduquette

mauraduquette · 2020-06-19T00:55:04.581Z

Awesome! Thanks again

Boost · 2020-06-22T04:16:52.653Z

Hey @ambroisedlg, thanks for the post! I’m doing what you’re using temporarily, but it seems a bit problematic when it gets to 12am of the next day.

ambroisedlg · 2020-06-22T06:33:40.640Z

@Boost what is the problem exactly?

Boost · 2020-06-22T21:43:56.757Z

How would you set up the end time, if it overlaps at 12am of the next day?

ambroisedlg · 2020-06-22T22:55:04.205Z

@Boost do you mean if the User is available from say monday 8pm to tuesday 2am for example? That’s a good point. With that current configuration the User would have to pick 11:59pm for monday’s closing hour and tuesday 12:00am for tuesday’s opening hour so there is no interruption on his calendar

Boost · 2020-07-06T06:53:34.401Z

Just curious @ambroisedlg, how would you set it up if someone wanted to create multiple chunks of time within a day? (So that users can take breaks)

For ex. Monday 8am-11am, 1pm-5pm, etc

Edit: I guess that part would be easy, the hard part is allowing users to book out certain chunks of time, while taking that out of the available times.

I tried using the plugin you recommended, but from I remember, there were some limitations on date ranges and filtering out times, since it only had a minimum and maximum date

ambroisedlg · 2020-07-06T08:34:29.427Z

Boost:

the hard part is allowing users to book out certain chunks of time, while taking that out of the available times.

@Boost One way to do it is to create an Event from 11am to 1pm for example. In the user’s calendar, do a search for Events overlapping with the timeslot. If the count >0, make the time slot not clickable, therefore not bookable

dantidmas88 · 2020-11-15T11:52:00.777Z

@ambroisedlg thanks for this tip! Works really well and a simple way to handle availability. You rock!

janz28 · 2020-12-07T20:32:52.358Z

Hi!

I am currently building the same thing. I was wondering how can I create multiple chunks of time within a day ? Thank you

Christophe_HK · 2020-12-07T21:22:51.465Z

Define the start time and end time of the day, or of each day if the week (opening hours) then setup a backend workflow to split your day’s hours in time slots. You can also add the timeslots duration as a parameter of the workflow (15 min, 30 min, 1 hour,…)