Show Event Time and Event Time For Different Timezones

Hello,
I have events in my website and I want to display the time of the event. But I also have people looking for this event throughout many different timezones. I would also like to display the event time in the current timezone they are in as well. For example let's say the event starts at 11:00am EST I would like to have a table that be like Event Start Time (EST) Your Time (Current User Timezone)

So I want this to happen. I display the time I want lets say 11:00 AM. Then I want to display the users timezone so it grabs that 11:00 AM and then converts it into their current timezone so if they were in PST it would say 8:00AM

Thanks!

  • Adam Czajczyk

    Hi Nick

    I hope you're well today and thank you for your question!

    The Events+ plugin already includes a tool for this. Please go to the "Events -> Settings -> Add-ons" page and enable a "Local Timezones" add-on.

    This add-on doesn't have any settings and what it does is that it takes local time settings out of the user browser with JS and automatically adjusts the event date.

    Give it a try please and let me know if it solves the issue for you.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Nick

    Thanks for your response!

    I think I misunderstood your initial post then. I referred to Events+ because there was no plugin name assigned to the post and you didn't mention any other plugin/solution that you are using so I naturally assumed that you are actually asking about our Events+.

    I understand now that you're using some different solution then. Is that some other plugin or you're just posting events as posts (e.g. as custom type posts, with events' dates in custom fields)? Could you point me (a link) to an example even on your site?

    Looking forward to your reply,
    Adam

    • Nick

      Hey Adam, Currently the only plugin I am using to display time information is TablePress. In an ideal situation, I could do something like this. Have a table with 3 Columns Group Name, Event Time, User Converted Time. For example, if I had a row in that table and the user is in Eastern Standard Time (Not sure if you would have to it based on IP) it would look like this.

      So a row could look like this Group A, 11:00 AM CST, 10:00 AM EST

      I am not sure if you could do that with just using some php

  • Adam Czajczyk

    Hi Nick

    Thanks for response!

    I wouldn't "trust" IP on this. An IP address can sometimes be "misplaced" in geo-location sense and while that doesn't matter much e.g. for blocking access to the site, even a few hundred meters in some cases might matter because it would assign user to a wrong timezone.

    Also, an IP can be "spoofed" because user might be using some VPN so for example while physically located in one of US states, a visitor can actually be visiting site via Germany or Panama :slight_smile: That's another case when the timezone would be wrong.

    It would be more reliable to actually read visitor's time zone from the browser. That, however, means going the JS direction rather than pure PHP. This is an interesting solution:

    https://danielcompton.net/2017/07/06/detect-user-timezone-javascript

    However, as stated in the article, there might be issues with older browsers so that would require some fallback if you do care about those (e..g IE 11 and older and Firefox 51 and older). Here's another options - getting an UTC offset rather than timezone:

    https://stackoverflow.com/a/28117093

    So, I think mixing these two approaches with a browser detection would give you a pretty accurate information about user's current timezone.

    Then the thing would be to adjust the time displayed on site. You do know what timezone is used for events and the timezone that visitor's in, so that can be used for conversion. First you'd need to read the date with JS but that's not too complex, luckily. You would, however, probably want to add some hidden display of a date to your events to use some standard format because so far - as I can see on /events page - the dates are displayed in more "human friendly" way.

    Anyway, if you got a date in a format like "9 July 2015 11:00 EST", you should be able to make a conversion:

    https://stackoverflow.com/a/18612568

    and then write it back to the page using JS again.

    That's a bit of custom coding but it's doable, I think.

    If you'd want to stick to pure PHP instead, I think the simplest and most reliable way would be to actually show on page that currently all events are displayed using some specific timezone and just give user a switch (e.g. drop-down selection) to let him/her choose his own timezone. The "question" here is how to actually "reflect" that converted time zone on page but that's again a matter of how those dates are put there - if it is via some sort of shortcode or if it's some native WP function (template tag) that includes some filters...

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.