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 {"path":"ADD_YOUR_CMS_ELEMENT_NAME","transformers":[{"name":"date","arguments":["YYYY-MM-DD hh:mm a"]\\}],"type":"Date"\\} }} 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 ", 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.
