Yes, it is possible, using the following JavaScript API method: skuid.time.setUserTimeZone(timeZoneKey)

example:

skuid.time.setUserTimeZone(“America/Los_Angeles”)

.then(function(){

console.log(“Time Zone has been set to Los Angeles!”);

});

This method returns a Promise which is resolved once the UI has been re-rendered to display all Datetimes fields and Calendars in the desired Time Zone.

Here is the XML for a page that allows you to play around with changing Time Zone, using a Ui-Only Field and Model Action to trigger a Snippet that changes the Ui’s time zone:

row.updated


TimeZonePicker__ui
































































Start RAW
{{{StartDateTime}}}


End RAW
{{{EndDateTime}}}












{{Subject}}






{{Name}}


























var params = arguments 0],
updates = params.updates,
newTimeZone = updates.TimeZonePicker__ui;

console.log('Switching UI to new Time Zone: ’ + newTimeZone);

skuid.time.setUserTimeZone(newTimeZone)

.done(function(){

console.log('Done! UI Time Zone is now: ’ + skuid.time.getUserTimeZone());

});

---

Thank you for your reply!

So this changes All: Skuid UI to render Dates, Datetimes, and Calendars in the specified Time Zone?

It does not affect only the calendar? if so, how do you apply it only to the calendar?

Also: does the timezone automatically sets back to the user’s SF Timezone when the page reloads?

Thanks

---

It affects the entire visible Skuid Page - you cannot apply it only to the calendar. It would be a confusing and inconsistent user experience to have Date / Datetime fields rendered based on a different time zone than a Calendar component sitting right next to them on the page.

The UI automatically resets back to displaying in the running user’s configured time zone when the page reloads. 

One common approach to retaining the time zone is to have it based off of a custom field on an object visible in the page, for instance if you have a “Location” object that you’re showing appointments for in a given page you could add a “Time_Zone__c” field on the Location object so that when the page loads you can use the JavaScript methods given above to set the UI time zone to the Location’s time zone.

---

I have a particular use case that requires users in one time zone to schedule appointments for a calendar in another time zone.  So certain fields on the UI would be required to remain in the user’s own timezone, such as the local time that a call came in for example while the calendar’s should reflect the timezone for another timezone.  

---

The easiest approach to achieve this declaratively that I can think of is to put the portion of your page that is displaying “local time” data into a separate Skuid Page and embed it within the parent Skuid Page using an in a Template component. Putting it in a Page Include won’t work because the Page Include will inherit the configured Time Zone settings for the parent page. But an iFrame will have a separate JavaScript execution environment where the UI Time Zone will be the user’s “local” / Salesforce time zone. Then in the parent page you can use the “skuid.time.setUserTimeZone” method as described above so that the Calendar is displayed in the Appointment Location’s time zone.

---

Thank you for the idea!

I kinda need the inverse of that because I have the calendar control inside a Tab Set so I would need everything in the Tab Set to remain in the ‘local time’ but the calendar in the appointment location time zone.  I will give it a try.

One more question:  If I have the calendar for example in an iFrame, or any skuid component for that matter, will it be able to receive events initiated outside that iFrame, such as in the Tab Set mentioned above?

Thanks

---

@zach - I have noticed after adding this to a page, that sometimes the Date / Time fields that are displayed based on Event Display settings do not re-render to a UI friendly format and the Calendar Events are not clickable. It seems intermittent. Sometimes it loads fine, other times it does not. If I change the Time Zone using the UI only field the issue seems to go away, unless I switch it back to --none–. I have tried using Default Items to set this UI only field to a specific value initially, but that seems to break it.

row.updated


TimeZonePicker__ui













































































Time Zone

















<font size=3>Appointments to Approve</font>















AppointmentsToApprove




Appointments
AppointmentsToApprove
















AppointmentsToApprove









AppointmentsToApprove








<font size=3>Please describe why you are rejecting this Appointment</font>








Rejection Reason

---