Display an Event in a Users Local Time Zone in Webflow

Being based in New Zealand, I have the curse that any event that I want to tune into will usually be at 2-4am my time. I might be a morning person, but I'm not ready to tune into an event before I have had my first coffee of the day.

And yet, I'm often misled to think that any event I'm planning to watch will take place in the afternoon, as most event pages I'm landing on aren't localising the event time, but instead showing me the time where the event takes place.

This is the norm for most event websites and pages, but it doesn't need to be. I'll show you exactly how you can set up the date and time to adapt to a user's local timezone so they know straight away when an event is going to take place.

Let’s jump in and see how we can set this up.

1. Set up a Date/Time picker for our event

Firstly, in our CMS collection for events, we are going to make sure our date and time picker is set up correctly, with the time picker added. Feel free to use any label you want, and then save this field.

With this set up, go into an event and ensure both a date and time is selected within the CMS item.

Now we can go into the collection page, drop in some text elements, and bind the date and time to this text. You want to do the date and time in separate text elements.

Feel free to publish this and make sure it's looking how you want it to.

Now for the main event, let's make this time adjust depending on where our user is located.

2. Adding in the custom code to localise

Now we are going to add a HTML embed into the page. NOT in the page settings, but actually embedded in the page. Feel free to drop it anywhere you want, but the top of the page might suit.

Add this custom code:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {

‍
 let timeFormat = new Date('{{wf {&quot;path&quot;:&quot;ADD_YOUR_CMS_ELEMENT_NAME&quot;,&quot;transformers&quot;:[{&quot;name&quot;:&quot;date&quot;,&quot;arguments&quot;:[&quot;YYYY-MM-DD hh:mm a&quot;]\\}],&quot;type&quot;:&quot;Date&quot;\\} }} PDT'.replace(/-/g, "/"))

const date = {
  month: "long",
  day: "numeric",
   year: "numeric",
};

const time = {
   hour: '2-digit',
   minute: "numeric",
   hour12: true,
   timeZoneName: "short",
};

$('.date').html(Intl.DateTimeFormat('en-US', date).format(timeFormat))
$('.time').html(Intl.DateTimeFormat('en-US', time).format(timeFormat))
‍
})
</script>

I'm going to break this down at the end of this post, but first let's get everything up and running.

You'll notice a long ling of red text once you paste the code in. Not to fear, this is exactly what you should be seeing.

Webflow doesn't exactly love that we are using some weird custom code, so it's just trying to inform us that it thinks it looks wrong, but it's not.

We need to replace the "ADD_YOUR_CMS_ELEMENT_NAME" with the name of the Date/Time picker label that we've used. Since we need to get this exactly right, we are going to add in the custom CMS field at the bottom of all our code, and then copy it so we can find the title.

Once you've selected the purple CMS field, we are going to paste it into any text programme so we can see exactly what's inside it.

Though it looks like a bunch of nonsense, the bit that we're looking for is just after the 3rd &quot;, and remember that it will look like something similar to what you called the label back when we set up the Date/Time picker.

In my case, it's start-date-time, so I'm going to copy this and drop it back into our custom code that we added, replacing ADD_YOUR_CMS_ELEMENT_NAME.

If you managed to get through all this custom code and you're not feeling too nauseous, then let's bind the new date and time to the text and test this.

3. Binding the code to the text elements

Remember where we added in our text elements? We're going to add classes to this text to tell the code where we want the custom date and time to be displayed.

We're going to add a 'date' class to the date text, and 'time' class to the time text.

Once we've done this, we can publish our site and see the result.

Now our site is changing the date and time live on the page to be adapted to our local time zone.

The last issue to fix is that I set the date and time in New Zealand, but now the time is showing up differently than the time I set in the CMS. We want the time to adapt to my timezone, not a different timezone.

Let's jump back into our custom code and at the end of the red block, change the PDT timezone to ours, which is in this case, GMT+13.

After we have republished and refreshed our page, we can see time is now the time we set in the CMS.

‍

4. Testing out the time zone changing

We can now even test this in Google Chrome by using developer tools to change our location.

Right click and inspect the page to bring up the code, and then under More tools, choose Sensors.

Using Sensors we can override our location to be somewhere else around the world. Simply select a different location, refresh the page, and see how the time and date changes.

Now we can see that in Moscow, our opening keynote is more of an evening affair. At least it's not in the middle of the night, like it is in Mumbai.

5. Understanding the code and changing formatting

Lastly, let's break down a couple of things in the code to help you better understand how the code is set-up, and maybe troubleshoot any problems you have.

<script>
var Webflow = Webflow || [];
Webflow.push(function() {

Here we are setting up the code, and you won't need to touch this code.

‍

let timeFormat = new Date('{{wf {&quot;path&quot;:&quot;ADD_YOUR_CMS_ELEMENT_NAME&quot;,&quot;transformers&quot;:[{&quot;name&quot;:&quot;date&quot;,&quot;arguments&quot;:[&quot;YYYY-MM-DD hh:mm a&quot;]\\}],&quot;type&quot;:&quot;Date&quot;\\} }} PDT'.replace(/-/g, "/"))

Next we are creating a date and time for the one we set in the Webflow CMS. At the end of this code we are stating the timezone that the code is set in, and adding in some code to make the time display correctly in Safari by replacing "-" with "/".

‍

const date = {
  month: "long",
  day: "numeric",
   year: "numeric",
};

const time = {
   hour: '2-digit',
   minute: "numeric",
   hour12: true,
   timeZoneName: "short",
};

Now we are deciding how we want the date and time to be formatted on the page. You can remove any of the specifiers and see that it will be removed on the live page.

For example if you don't like the timezone showing at the end of the time on the live page, simply remove the timeZoneName: "short", line.

‍

$('.date').html(Intl.DateTimeFormat('en-US', date).format(timeFormat))
$('.time').html(Intl.DateTimeFormat('en-US', time).format(timeFormat))

Lastly we are binding the new time format to the date and time classes. We're also telling the date and time to display in english no matter where the user is based.

If we want the language of the time and date to adapt to wherever the user is located, we can swap out both instances of 'en-US' for navigator.language, which will then look like this.

$('.date').html(Intl.DateTimeFormat(navigator.language, date).format(timeFormat))
$('.time').html(Intl.DateTimeFormat(navigator.language, time).format(timeFormat))

‍

All good things must come to an end, so we finally close the script of our code.

})
</script>

‍

A quick note

This was a long process to figure out, and it wasn't without a bunch of help. If you got stuck somewhere or think this post could be improved for clarity, do reach out and let me know.
Being based in New Zealand, I have the curse that any event that I want to tune into will usually be at 2-4am my time. I might be a morning person, but I'm not ready to tune into an event before I have had my first coffee of the day.

‍