Advanced Bubblers - How to Create a Calendar Pattern that is Timezone Aware

I am a couple of days away from submitting my Calendly clone template.

I think overall your data structure is not conducive to multiple timezones, but maybe somebody more experienced with dates/times would say it could be used.

For my data structure I saved availability as date ranges…so when a user is available from 9AM to 12PM and 2PM to 5PM on Mondays, this is saved as two separate date ranges.

This way my calendar is always displayed in the current users time zone and I allow Bubble to handle the most difficult task of keeping times aligned regardless of the time zone.

Using this structure also allows me to really ‘clone’ most of Calendly functions. So on my template users are able to create a schedule for Sunday to Saturday using multiple time ranges as well as ‘alternative schedules’ for specific dates. Then the user can also set not only the duration of the event, but buffers for before and after the event as well as time intervals for when they can be booked.

So a user may set their time interval for 5 minutes on a 45 minute duration so they could be booked at 1:00PM, 1:05PM, 1:10PM etc. Everything is done using time ranges and date ranges to make sure all of those complex features are working and the user will not get booked for an event that is outside of their available time ranges. An example is available from 9AM to 12PM with a 45 minute event at 5 minute interval with a 15 minute buffer after the event the last two possible time slots available would be 10:55AM and 11:00AM.

The event times are saved as date ranges as well, plus I have a date range saved to keep track of the buffers so that when I create the available time slots for any given date selected, I can incorporate the buffers for filtering.

When I test using a add-on in firefox to change my browser timezone, all saved date ranges are viewed correctly according to timezone and my calendars are set up only to display the current users timezone instead of any dynamic timezone. When a user clicks a date in a calendar, they are clicking the date according to their timezone, not a fixed Day of Week Number.

I watched this video the other day

it was helpful to understand a bit more about dates and time zones.

There was another forum post Keith replied to about time zones and days of the week to a user who created another template that is supposed to be a clone of Google Calendar where Keith uses option sets to enable the functionality…that could be a good place to start if you are keen on keeping the data structure you have.

1 Like