Booking in different timezones

Need help
1

Hello Bubblers,
I have a question that’s giving me a headache. I’m mentoring on a project that allows online bookings for accommodations located in different timezones. I have several calendars:

  1. A calendar on the booking page so a customer can make a reservation.
  2. A calendar in the back office for managers in each area to manage their bookings, cleaning schedules, etc.

I’m working with 5 different timezones, and I’m encountering quite a few issues.
If I base everything on the Current User’s timezone (on the page), the bookings might shift by one or two days compared to a customer who booked for the same location but from a different timezone.
The date generator doesn’t take timezones as a parameter. So sometimes, my date generator starts on a Tuesday, and my entire calendar gets completely offset.

Ideally, I would like to save each booking at a time set according to the timezone of the location. I can’t have a dynamic timezone on my booking page, so the solution would be to create a booking page per timezone and redirect to the correct page depending on the location? Not very clean…

Alternatively, I was thinking of setting and fixing the whole application to UTC, recording the difference from the location to UTC, and adjusting the display accordingly?

Anyway, I’m kind of going in circles here, and I would love to get some feedback from people who have faced similar issues!

2

The best way to deal with bookings is to ignore local time zones completely (they’re not relevant here) and keep all dates in UTC.

All dates should be set/defined in UTC, and displayed in UTC.

3 Likes
3

I vouch this approach.

1 Like
4

How do you display all the dates in UTC? The database is based on the User’s location and I feel like I have no control on it

5

Hey @lorenebergougnoux5,

When saving the date, you can round down to the date in UTC

I had dealt with one of these issues in one of my apps once and since the org i was building it for was based in Pacific Time, I rounded everything to Pacific Time instead

1 Like
6

Yes but even if it’s saved on UTC, we still don’t see the same data from a timezone to another.

Like UTC time it’s gonna be 12pm
Paris Time it’s gonna be 14pm

And my calendar is fucked bc of that aha
Really struggling

7

Hmm sorry, just so I’m understanding correctly:

Let’s say someone books 12 PM ET

It should show as 9 AM PT for me right?

What are you intending for the behavior be?

When I book on let’s say a Calendly, 9 AM PT is what it shows for me, but is reflected as 12 PM ET for someone on the East Coast?

Maybe I’m not understanding your problem correct :thinking:

Edit: If you want everyone to view the same thing (i.e., on the same timezone), you would save in UTC and also make sure your calendar is displaying in UTC, not the current user’s timezone

8

As I’ve mentioned before… Dates and time zones are one of the most confusing and complicated things in all of web development… and lots of people get this wrong (it’s one of the most common causes of errors in apps that I have to fix).

For a booking app like this, when you display a date in Bubble, you should format it however you want it to be displayed and select UTC as the timezone.

Basically, you store all dates in UTC and also display all dates in UTC (so local time doesn’t come into it).

It’s more complicated than that though… here a a few things to consider…

When defining a date, it should be defined in UTC time.

If using the Bubble data picker for this, it’s simple - just set UTC as the timezone.

Assuming no Time is set in the date picker, any date selected will default to 00:00 (UTC) on the selected date.

Then just ensure you always use UTC through the app whenever manipulating that date, using it for search, or displaying it.

If you’re doing something like ‘current Date time: rounded down to Day’ its more complicate though, and easy to get wrong.

It’s tempting to think you can just use Current Date; rounded to Day (in UTC), but this is NOT correct, and will cause errors.

i.e. as of typing this reply, the Current Date in UTC is 10:15am 10th October

However, The current Date/time in The Baker Islands (GMT-12) is 10:15pm 9th October.

That means that a User there, who used current date/time: rounded to Day (in UTC) would have the Date set as 00:00 10th October - which would be incorrect by a whole day (it’s actually 9th October there).

What you actually need to do is round the current Date/Time to Day in the User’s Local Time zone (00:00 9th October) and then convert that to the same date/time in UTC . So the eventual defined Date is 00:00 10th October). This is the bit I see a lot of apps get caught out on, and end up with mismatched dates.

Unfortunately, there is no native way in Bubble to convert a date from one timezone to another (although if you know the UTC offset you can modify it that way)

But it’s easier to use a plugin or some custom code to do the conversion (I usually use Luxon for this).

But in any case, as the Bubble database only has one type of field for storing Dates (which is a timestamp), if you need consistency in Dates/Times (which, for a booking app you do), all dates (at least those relating to bookings) should be defined, stored, and displayed in UTC.

Local time is not relevant, and will lead to errors.

2 Likes
9

Thanks a lot @adamhholmes

10

The thing is, even if I store data as UTC, this is what I see from New Zealand. I feel like I can’t display these dates in UTC, because, even if I select UTC on the page timezone selection, it still dispolay data as I can see them in the database.

Screenshot 2024-10-12 at 5.29.29 PM
Screenshot 2024-10-12 at 5.29.29 PM854×1136 56.6 KB

11

In bubble database in app editor dates/times are displayed in browsers time zone, we can not change that unless you change your browser timezone.

In your app have you enabled time zone overrides? I think it’s still experimental and is an opt in feature.

12

Ok, this sounds logically

And so I assume if the 2 users’s browsers are in different timezones; they would see the local time value?

1 Like
13

This topic was automatically closed after 70 days. New replies are no longer allowed.