Forum Discussion

Natkinson's avatar
Natkinson
Genius
3 years ago

Convert Event Dates and Times to User's Timezone

I'm creating a custom component to show specific events I'm pulling via an API call in FreeMarker. One issue I'm running into is the event data pulled from the LiQL call is pulling in the occasion_data.start_time and end_time in the timezone where the event was created. I'd like my component to display event data in the timezone of the user viewing it, so if the event was created in the US/Eastern timezone but someone in US/Pacific is viewing the event, it should convert the date/time to that timezone (e.g., the event start time is 11:00AM EST, so the API call pulls in 11:00AM EST, but I want the component to show 8:00AM PST for users in US/Pacific). I've scoured the dev guides and don't see an easy way to convert dates/times to the user's selected timezone. I assume it should be possible because it works that way in the native Event pages. Is there a utility or built-in somewhere that I'm missing or is this another thing that's only available to Khoros and professional services?

API
FreeMarker
REST API v2 & LiQL
  • Akenefick's avatar
    Akenefick
    Genius
    2 years ago

    Oops my mistake. <#setting time_zone="US/Eastern"> does work! I was looking at a list of Java time zone ids the Freemarker documentation referenced and it didn't include things like US/Eastern, but it does work!

  • MarkPr's avatar
    MarkPr
    Khoros Alumni (Retired)
    3 years ago

    Hi Natkinson,

    It may be safe to convert the date string to the current time zone using a common underlying technology. Here are two good options for you:
    Just one word of caution, depending on how your site is used, it may NOT be safe to convert the time zone. For example, if your same interface also lists events that are in-person at a time in ET, then potentially you should consider leaving it as ET to give the reader a visual cue that the event is somewhere in the Eastern Time Zone.

    Be well!
  • Natkinson's avatar
    Natkinson
    Genius
    3 years ago

    MarkPr So I'd just need to grab the user's context to get their set timezone and then convert it using one of these methods? I was aware of how to convert times/timezones, just not how to convert it to display in the timezone of a specific user who is viewing the event in question.

    And all of these particular events are all virtual. I want this custom component to display dates/times exactly like the OOTB Events pages, where it converts to the user's chosen timezone.

  • MarkPr's avatar
    MarkPr
    Khoros Alumni (Retired)
    3 years ago

    Hi Natkinson,

    Are you all set? I have been thinking about your challenge! 

    If you are using standard date and time HTML input fields for date/time, it encodes the date in standard ISO 8601 format and includes the time zone. Then, displaying the fields in your custom component using Freemarker will automatically output the date and time in the correct time zone to the user viewing it. 

    The most you'd have to do in that circumstance is use Javascript to pull the time zone from the browser and add Freemarker code to set the Time Zone:

     

    <#setting time_zone="America/New_York">

     

     

    If you are not using a standard date and time input field or the time fields are not in ISO 8601 format. Then how you adapt this will depend on the format and you'd need to post more details for someone to help you complete your component. 

    Cheers! 

  • Akenefick's avatar
    Akenefick
    Genius
    2 years ago

    Hi, I realize this post is a little old. I'm trying to do the same thing. I can get the users time zone with:

    "/users/self/settings/name/config.timezone"

    and I can set the time zone as above:

    <#setting time_zone="America/New_York">.

     

    However, the time zone returned by the first "US/Eastern" for example does not work for the freemarker time_zone setting. Do I have to go through every time zone and correct it. I could do something like this:

    <#if timeZone == "US/Eastern">
    <#assign timeZone = "America/New_York" />
<#elseif timeZone == "US/Central">
    <#assign timeZone = "America/Chicago" />
so on ...

     

    But seems awfully tedious. Is there a better way? Seems like Khoros might have some way to correct the time zone for the user but I can't find anything in the documentation.

    Natkinson how did you end up managing time zone?

     

    Thanks