The Ultimate Bubble.io Guide to Timezones

Understanding Time Zones in Bubble

Here's your guide to working with time zones in Bubble. In the past I've worked on scheduling apps like Calendly clones that sort of thing and working with time zones in Bubble has been a complete nightmare. However as of a few months ago early 2023 it has become easier and I want to show you some of the things that I've learned through continuing my work with time zones in Bubble.

Basics of Time Zone Detection 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 time zone 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.

Demonstrating Time Zone Detection

So I'm going to be using I've got this plugin here browser time zone 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 time zone ID. This is so that for the purpose of this demonstration I can show you that Bubble is detecting that I am Europe London which is true Planet No Code we're based in the UK.

Overriding Time Zone Detection

Let's deal with how do I trick or how do I convince Bubble that I'm in a different time zone. 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.

Bubble's Smart Time Zone Display

I don't know off the top of my head if that is the same time zone 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 time zone that you're in and it always displays time date data in what it thinks is your local time zone not what it was necessarily saved as but what it thinks is your local time zone.

New Time Zone Tools in Bubble

So 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. But I'm going to demonstrate to you now some of the tools that Bubble has added that makes working with time zones easier.

Enabling Time Zone Override Controls

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 time zone override controls and so I'm going to click on each of these and then give you an example.

Time Zone Selection Options

So now if I go back to design and I go onto my time date input you can see that I have an added field here so by default it says current pages time zone and now I also have on current page I have time zone selection so it says users current time zone and I can now override each of these.

Demonstrating Time Zone Overrides

So for example let's go back to our 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 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 time zone that the user is entering data from at the moment Bubble is taking the time zone as my time zone and displaying as my time zone 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 the user select their time zone and then always override it perhaps if you were unconvinced that Bubble reliably detects the time zone every time or maybe people are traveling and yet you always want them to be working within the same time zone they set within their account you can do that with dynamic choice but for now let's go static and let's go let's go back to Los Angeles.

Time Zone Conversion Example

So what do we expect 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 p.m because the calendar is still in London time okay 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 time zone field on the calendar itself okay so you can't override that the calendar is always going to show it 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 time zone and this can be very useful because rather than having to override every element on the page where you're referring to time date data you can just set it on the page.

Page-Level Time Zone Settings

Let's go for static choice and let's go for something that's going to be really different like does it have Auckland yep let's see what it does with that so remember we've got 8 p.m and we've got 12 p.m and so okay so that hasn't changed it by changing the page time zone and actually it's not changed the time zone that the browser is giving over to Bubble but let's let's run the browser location override again let's go for Tokyo as that's going to be vastly different refresh the page okay so there you go by overriding the browser with the browser dev tools we have been able to demonstrate that now the calendar is showing the dates of the events that I've saved but in Tokyo time.

Time Zones in API Workflows

One last trick with working with time zones and that is what about APIs and you might notice that when we've enabled the time zone overrides we've also enabled access to a time zone override in our APIs and so this means that we can set a time zone 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 override it then it is going to be using the user's time zone.

Conclusion and Further Resources

Okay yeah I said it was complicated but this just means that we can dictate a time zone for the current date time field in a workflow by simply changing it on the time zone selection here. Now if you're hungry for more Bubble content you can head to our website plantno-code.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.