Here's your guide to working with timezones in Bubble. In the past, I've worked on scheduling apps like Calendly clones, that thing, and working with timezones in Bubble has been a complete nightmare. However, as of a few months ago, early 2023, it has become easier.

The Basics of Timezone Detection in Bubble

I want to show you some of the things that I've learned through continuing my work with timezones in Bubble. First of all, let's establish the basics, which is that when a user accesses your Bubble app, it gets from the browser the timezone ID. Now, that can be faked. Things like VPN tools in the browser, Dev tools, which I'm going to demonstrate to you later in this video, can make that unreliable. But we can display it very basically. So I'm going to be using... I've got this plug in here, browser timezone and locale. We've demonstrated this before. I've put the element on the page and I've simply referred to the element and said browser timezone ID. This is so that for the purpose of this demonstration, I can show you then that Bubble is detecting that I am Europe, London, which is true.

Tricking Timezone Detection in Bubble

At a Planet No Code we're based in the UK. So let's deal with how do I trick or how do I convince Bubble that I'm in a different timezone. Well, let me demonstrate that. So in Chrome, you would go into inspect and we go into tools, sensors, and then on location, I can override this. So I could say San Francisco. And then if I refresh, you can now see that Bubble is saying that I'm in America, Los Angeles. So I don't know off the top of my head if that is the same timezone as San Francisco. I'm going to assume it is. But what I'm demonstrating here is that when you are a user looking at a Bubble app, visiting a Bubble app, Bubble assesses the timezone that you're in, and it always displays time date data in what it thinks is your local timezone, not what it was necessarily saved as, but what it thinks is your local timezone. Actually, that's quite smart and quite helpful, except for when you're trying to, say, convert different times, different days of the week, that can become a real nightmare. And that is definitely something for another video.

The Easier Way: Tools for Timezone Management in Bubble

But I'm going to demonstrate to you now some of the tools that Bubble has added that makes working with timezones easier. So I'm going to disable the override for now and refresh that page. Let's go into settings, general, and scroll all the way down to the bottom, and we can see that under advanced options, enable timezone override controls. And so I'm going to click on each of these and then give you an example. So now if I go back to design and I go on to my time date input, you can see that I have an added field here. So by default, it says current pages timezone. And now I also have on current page, I have timezone selection. So it says users current timezone. And I can now override each of these. So for example, let me just show you what I've got set up here. I've got my time date picker and I've got edit workflow and I've got create an event with the time date picker. So if I refresh it, let's pick today at... So it's easy to remember at 12. I'm going to click Create.

Page-level Timezone Settings in Bubble

I'm going to go on to Week View, and I can see that it's in there at 12. But what if I wanted to dictate the timezone that the user is entering data from? At the moment, Bubble is taking the timezone as my timezone and displaying it as my timezone. So that's why we get 12 and we get 12. But what if I change this one to static choice? And you can have a dynamic choice there. You could have a the user select their timezone and then always override it. Perhaps if you were unconvinced that Bubble reliably detects the timezone every time, or maybe people are traveling and yet you always want them to be working within the same timezone they set within their account, you can do that with dynamic choice. But for now, let's go static and let's go back to Los Angeles. So what do we expect to happen here? Well, if I again say, midday create event, it's going to add it as Los Angeles time. And so this is midday Los Angeles. And Bubble is telling me that that is 8 PM because the calendar is still in London time.

Additional Timezone Features and API Integration in Bubble

Let's have a look at what else we can do with this. On the calendar... No, I don't think there's not a timezone field on the calendar itself. Okay, so you can't override that. The calendar is always going to show back in actual local time. But let's explore some of the other options we had down here, which is on the page level. So you can set the page timezone. And this can be very useful because rather than having to override every element on the page where you're referring to time, date, date, date, so you can just set it on the page. So let's go for static choice and let's go for something that's going to be really different like... Does it have Auckland? Yeah. Let's see what it does with that. So remember, we've got 8 PM and we've got 12 PM. Okay, so that hasn't changed it by changing the page timezone. Actually, it's not changed the timezone that the browser is giving over to Bubble. But let's run the browser location override again. Let's go for Tokyo. That's going to be vastly different. Refresh the page. Okay, so there you go.

Conclusion and More Resources

By overriding the browser with the browser Dev tools, we have been able to demonstrate that now the calendar is showing the date of the events that I've saved, but in Tokyo time. One last trick with working with timezones, and that is, what about APIs? And you might notice that when we've enabled the timezone overrides, we've also enabled access to a timezone override in our APIs. And so this means that we can set a timezone for the API to run. And that can be very useful if you've got API data in and then you're combining that with current date time, you want to know what that current date time is. And by default, if the API was triggered externally, meaning it wasn't triggered by a user, then it would be UTC. If the API is triggered by a user, unless you ever ride it, then it is going to be using the user's timezone. Okay? Yeah, I said it was complicated. But this just means that we can dictate a timezone for the current date time field. Build in a workflow by simply changing it on the timezone selection here.

If you're hungry for more Bubble content, you can head to our website, planetnocode.com, where we've got over a hundred Bubble tutorial videos just like this one. Really detailed, very bite sized. Some of them are member exclusive. You will only find them on our website. Also, if you think that this video is great and it's helped you, we would really appreciate a like and subscribe.