Forum Academy Marketplace Showcase Pricing Features

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

I am recreating Calendly and looking to give the User (Host) the ability to set their Weekly Availability as well as their Availability on specific dates. Meaning they can say “I’m available Every Monday 9-5, Tuesday 9-2, Wed 10-4, etc”

I was able to do this successfully when showing the Calendar in the Host’s Time Zone, by creating 7 pieces of Data (Availability) representing each day of the week.

Example:
Day of Week Text = Monday
Day of Week Number = 1
Available Times = 2:00pm, 2:30pm, 3:00pm, etc
Host Time Zone id = xx

This works great when I put this availability on a Calendar that is in the Host’s Time Zone, because their Monday Availability will always be on a Monday. But because of Time Zones, these available times aren’t always a Monday to someone else in the world.

What I want is for the Availability Pattern to be Time Zone aware, which I think would mean structuring how I save and user Patterns differently. As in the example below on Calendly, a Monday Availability in Canada can easily be a Tuesday Availability in Japan.

Example in Calendly - Toronto:

Same Calendar, but in Japan’s time, notice how the times to book are the same but the days of the week are now different:

The only solution I have thought of is creating a Pattern using Date/Times for a long timeframe, such as Month Pattern, and saving each individual date’s availability as an actual item instead of a pattern, but this has obvious drawbacks (hundreds of List items)

Anyone have any ideas how to make a Weekly Pattern timezone aware?

I’ve been deep in the weeds thinking about this one, so if anything isn’t clear above, it’s me, not you, so ask away for clarification :call_me_hand:

Cheers!

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

So is this setup creating or storing the date range for every date in the future?
(Monday Jan 11 9-5,
Monday Jan 18 9-5,
etc)

Seems like the most dependable/accurate way but might be heavier from a performance aspect (although haven’t fully tested)

No. I am using March 1, 2020 as Sunday to start my weeks.

This is because March 1, 2020 is a Sunday and it is kind of the date the world changed (maybe not exactly but March 2020 as a month was)

So my date ranges for the ‘normal schedule’ use March 1 - March 7 to represent the date according to day of week. Then my ‘alternative schedule’ where the user would change a specific date such as December 31 or some holiday date I use the specific date to save the date ranges for the times.

Everything is set up to adjust those dates, months and years according to the calendar displayed…so although the date range is March 2, 2020 9:00AM - March 2, 2020 12:00PM in the database to represent the Monday availability, when the user selects any Monday from the calendar, the saved scheduled meeting date range will be saved using the selected date.

So my ‘normal schedule’ will have five date ranges if the user selects just one time range for Monday through Friday…if the user selects 12 time ranges for their Saturday availability and all other days of the week are unavailable, the database would have 12 date ranges all with the date March 7, 2020 with the time values associated to the available times selected.

I might have done things in a more complicated way then necessary, but my database for saving availability is pretty ‘light-weight’ as I am not saving all future date ranges for each day of the week they are available as that would eat up a ton of capacity to save as well as retrieve I’d suspect.

I made heavy use of list shifter plugin as well as Orchestra and Satellite plugins to get all the reusable elements, repeating groups to communicate while creating schedules. It was honestly one of the most complex and mentally exhausting projects I have undertaken.

I had originally built the template in about two weeks only allowing a user to create one time range for each day, and then finding it necessary to enable multiple time ranges on a single day, that was the challenge and added about 3 more weeks overall. Ensuring no overlaps, notifying overlaps, making sure alerts to overlaps are removed when overlaps are fixed, getting times copied to different days, getting the schedules to show on page load on the user dashboard etc etc…it was a nightmare and I’m glad it is all finished now.

Interesting, I had thought about this strategy as well and was thinking there has to be a way to get this to work with a Pattern, and you may have cracked it :raised_hands:. You must be doing some smart date manipulation on the Booking Calendar correct? Or maybe I am overthinking this.

Whenever I tried to do it this way I couldn’t seem to make it work for the fringe cases of: early/late times (1am or 11pm availability) or across distant timezones.

With the normalized past date (start from Mar. 1) setup, March 1 as a Date (or Date Range) object is only always a Sunday if the Host and the Booker are in the same Time Zone (obviously leeway here if the locations are only a few timezones off and the schedules are during regular working hours). Because in Bubble March 1 is not a Day but an actual unix Date/Time

Example Sunday March 1, 9am 2020 in California was actually a Monday at 3am in Tokyo. So I would need the Host’s calendar or timezone on page to know when their Sunday (pattern) truly starts from. Or maybe I am missing something?

Also, if a User’s pattern is saved on specific date, such as Mar 1, 2020, it is in standard time, but if the date is used or manipulated while in daylight savings time I think it could be off depending how it’s used and manipulated. My brain is fried and I can’t give a walkthrough scenario right now, but in a past scheduling app I did it resulted in a bug infestation :rofl: For testing right now it won’t be a problem as we are in the same daylight savings as Mar 1, but to test it just change your Date/Time on your computer calendar and open a new browser window

Interested to hear how you might have solved some of this!

I’m using the list shifter plugin to change the date ranges into new date ranges dependent on the date selected.

From my understanding when a user is creating a thing in the database (in this case a schedule and therefore the date ranges associated with it) the thing is saved in their timezone. So if a user creates their schedule and another user views available time slots from another time zone, everything is shown correctly.

I tested this out by taking the schedules I created in my local timezone (Indochina) and using an add-on in firefox to change my browser timezone to USA Eastern time, which is exactly 12 hours behind my timezone currently. So a date range that was saved as March 1, 2020 12:00AM - March 1, 2020 12:00PM and it was displayed as February 29, 2020 12:00PM - March 1, 2020 12:00AM which seems to be exactly what would be needed to occur for a user in another time zone to see the availability correctly.

This should work out regardless of daylight savings time as I believe Bubble takes care of that. I also believe that it working on a leap year is even more encouraging of it working moving into the future as well.

Yes, this is what makes using a date range in my view more flexible than a day number since it is possible to manipulate the date ranges and be more likely to always manipulate it in such a way as to get the right date.

When the user is in California they are choosing the date from the calendar which I built using the calendar tool plugin and a repeating group, so the date is always correct for the user who is viewing the calendar and selecting the date. One thing that I can’t do with the calendar tool plugin is ‘trick it’ to accept the browser time zone when I use the firefox add-on to change my browser timezone…it causes the page to just never load, so I have not been able to fully test it out just yet…I’m going to need to get somebody in another timezone to make a test meeting to see if it does what it should.

My assumption though is that since everything is dates and Bubble saves the dates with a unix time stamp associated with the time zone the user who creates a thing is in, that the way the available time slots are created, the user scheduling the meeting in the different timezone should still see things correctly so that when they schedule a meeting both users will have the same unix time and see the times correctly according to their time zone.

My assumption here is that Bubble is handling daylight savings time issues…the date manipulations I’m doing are taking a number of milliseconds and adding them to the stored values, which may end up being an issue.

I will test it out tomorrow.

Thanks for the detail :+1:

Definitely agree that built in dates make this overall more accurate and easier, and these will definitely line up correctly when looking at timezones in the specific Pattern Dates.
But where I am struggling is using a March 1, 2020 pattern to show a Booker available times on June 1, 2021 while in a different timezone. To do this Bubble needs to reference a past date (mar 1), in a different timezone and different daylight savings to retrieve the pattern and apply it to June 1

I’m using the list shifter plugin to create the new date ranges. So I take the date ranges saved, such as March 1, 2020 12:00PM - March 1, 2020 5:00PM and allow the user to pick a date from a calendar which would be June 1, 2021 at 12:00AM. I extract the difference between those dates (so June 1, 2021 - March 1, 2020 is how many days) and I create the number of milliseconds between them.

Once I have that number of milliseconds, I create a new set of date ranges by applying the milliseconds to March 1, 2020 12:00PM - March 1, 2020 5:00PM to arrive at June 1, 2021 12:00PM - June 1, 2021 5:00PM.

This is all done using the list shifter plugin. Keith explained to me HERE how to use the process list function to create a new date from an existing date.

Because these existing dates that I am operating on come from the database as stored by Bubble (so stored in the Schedule Creators timezone) any manipulation done (adding the milliseconds to arrive at a new date) will manipulate the date in the Schedule Creators timezone and not the current users timezone.

Then once these dates are created using the process list function, I push them into another list shifter to process the list to obtain only the date ranges that are still available and use that processed list to display in a repeating group…it is the display that ‘looks’ like the dates are in the current users timezone but in fact it is still a date range in the Schedule Creators timezone.

I need to test the potential issue of daylight savings, although I suspect it won’t be an issue since I am only finding the total number of days between two dates and using the millisecond representation to create the new date range which leaves the hour and minute values unaffected so when a meeting is scheduled it is saved in the Schedule Creators timezone, which at that point may be during daylight savings time, but would be a non-issue since the meetings date is in that timezone and adjusted by Bubble to be interpreted by the booker to be in their timezone.

Finally finished up the template today, so I got a chance to test out the different timezones and everything seems to work fine.

I was able to change my timezone in google chrome using developer tools. I made some test bookings for my local time zone (Indochina) as well as New York and Los Angeles. All three times I choose from the calendar the same date (January 13, 2021).

Below are screen shots from my database from the LA and NY bookings, which were made for the same time slot (deleted the first to be able to rebook same slot).

Time Stamps are the same as is the Date Range which is stored in the user who created the schedules timezone (Indochina)…so the user in NY choose January 13, 2021 11:00PM - 11:30PM and the user in LA choose January 13, 2021 8:00PM - 8:30PM, which in the Schedule Owners timezone is January 14, 2021 11:00AM - 11:30AM.

Everything seems to check out across timezones.

This exercise helped me isolate an issue in regards to my display of the meetings, as my Date field is always supposed to be 12:00AM of the date the meeting starts, and for NY it is January 13, 2021 12PM and LA it is January 13, 2021 3:00PM, so I adjusted the way I save this during the meeting getting scheduled.

Not sure if I will run into an issue with daylight savings or not, but as every tech product out there, I need users to start using it to have some bugs reported if any exist.

Do you know of a way to alter my browser date/time to test for day light savings?

Looks good!

For changing the Date Time this is what I do on a PC to make sure it’s accurate: https://kb.wisc.edu/helpdesk/page.php?id=79027

Then when you change the date you need to make sure you open a new browser, as any previously opened browser windows (I think) are working on your old time zone

For Daylight savings, it may be worked in that you won’t hit an issue since from my experience of daylight savings it always occurs on a Sunday early (beginning of your pattern). So unless someone’s schedule overlaps when the the actual change happens, it might not affect your setup (availability range overlaps when the clock jumps forward or back)

1 Like

Have you looked into using Kloudless as a back-end for calendar integrations? It’s a great method to check for available timeslots.

Thanks for the heads up on this. Could be a good option for some projects