Is it possible to render a calendar showing the timezone other than the current user

Sofware Developer Guy

We have calendars in different cities with different timezone and we allow certain agents to view/modify appointments for those locations.

The problem is that our agents are usually in different timezones from the appointments they are scheduling and they see the appointments they are trying to schedule in their own local timezone as apposed to the timezone where the appointment is at.

Hope I am making sense.  Is it possible and how do I display a calendar whose times reflect a different city, based on that city's timezone, as apposed to the timezone of the current agent.

I can elaborate more if need be, but I hope that makes sense.

Thanks.

Zach McElrath

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:



<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="false" theme="Modern">
   <models>
        <model id="TimeZonePicker" limit="1" query="false" createrowifnonefound="true" adapter="" sobject="Account" unloadwarningifunsavedchanges="false">
            <fields>
                <field id="TimeZonePicker__ui" uionly="true" displaytype="PICKLIST" label="Time Zone" defaultValue="America/New_York" required="true">
                    <picklistentries>
                        <entry label="Europe: London" value="Europe/London"/>
                        <entry label="Eastern Time" value="America/New_York"/>
                        <entry label="Central Time" value="America/Chicago"/>
                        <entry label="Mountain Time" value="America/Denver"/>
                        <entry label="Pacific Time" value="America/Los_Angeles"/>
                        <entry label="Australia: Eastern Time" value="Australia/Sydney"/>    
                    </picklistentries>
                </field>
            </fields>
            <actions>
                <action>
                    <actions>
                        <action type="custom" snippet="SwitchTimeZone"/>
                    </actions>
                    <events>
                        <event>row.updated</event>
                    </events>
                    <fields>
                        <field>TimeZonePicker__ui</field>
                    </fields>
                </action>
            </actions>
        </model>
        <model id="User" limit="1" query="true" createrowifnonefound="false" sobject="User" datasource="salesforce" type="">
            <fields>
                <field id="Id"/>
                <field id="Name"/>
            </fields>
            <conditions>
                <condition type="userinfo" value="" field="Id" operator="=" enclosevalueinquotes="true" userinfotype="userid"/>
            </conditions>
            <actions/>
        </model>
        <model id="Event" limit="" query="false" createrowifnonefound="false" sobject="Event" datasource="salesforce" type="" orderby="StartDateTime">
            <fields>
                <field id="Subject"/>
                <field id="StartDateTime"/>
                <field id="EndDateTime"/>
                <field id="OwnerId"/>
                <field id="Owner.Name"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="TimeZonePicker" buttonposition="" uniqueid="sk-UEsRk-145" mode="edit">
            <columns>
                <column width="50em">
                    <sections>
                        <section title="Switch Time Zone" collapsible="no">
                            <fields>
                                <field id="TimeZonePicker__ui"/>
                            </fields>
                        </section>
                    </sections>
                </column>
            </columns>
        </basicfieldeditor>
        <skoocal rememberdate="true" rememberview="true" uniqueid="sk-UEswh-155">
            <sources>
                <eventsource name="SFDC_Events" createable="true" deleteable="true" updateable="true" eventclickhandler="custompopup" showdefaultbuttons="true" model="Event" namefield="Subject" startfield="StartDateTime" endfield="EndDateTime" groupfield="OwnerId">
                    <onclickpopup title="Edit Event" width="90%" showdefaultbuttons="true">
                        <components>
                            <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Event" buttonposition="" uniqueid="sk-1I7M4c-127" mode="read">
                                <columns>
                                    <column width="50%">
                                        <sections>
                                            <section title="Section A" collapsible="no">
                                                <fields>
                                                    <field id="Subject"/>
                                                    <field id="StartDateTime"/>
                                                    <field id="EndDateTime"/>
                                                    <field id="OwnerId"/>
                                                </fields>
                                            </section>
                                        </sections>
                                    </column>
                                    <column width="50%">
                                        <sections>
                                            <section title="End RAW" collapsible="no">
                                                <fields>
                                                    <field type="COMBO" valuehalign="" editmodebehavior="autopopup">
                                                        <label>Start RAW</label>
                                                        <template>{{{StartDateTime}}}</template>
                                                    </field>
                                                    <field type="COMBO" valuehalign="" editmodebehavior="autopopup">
                                                        <label>End RAW</label>
                                                        <template>{{{EndDateTime}}}</template>
                                                    </field>
                                                </fields>
                                            </section>
                                        </sections>
                                    </column>
                                </columns>
                                <conditions>
                                    <condition type="contextrow" field="Id" mergefield="Id" autocreated="true"/>
                                </conditions>
                            </basicfieldeditor>
                        </components>
                    </onclickpopup>
                    <eventtemplate>{{Subject}}</eventtemplate>
                </eventsource>
            </sources>
            <views>
                <eventview type="month" dragdrop="false"/>
                <eventview type="week" starthour="0" endhour="24" divisionsperhour="1"/>
                <eventview type="dayscheduling" searchbox="true" searchmethod="client" groupingmodel="User" pagesize="" starthour="0" endhour="24" divisionsperhour="2">
                    <groupingtemplate>{{Name}}</groupingtemplate>
                </eventview>
            </views>
        </skoocal>
        <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Event" mode="read" uniqueid="sk-UEXUw-68">
            <fields>
                <field id="Subject" allowordering="true"/>
                <field id="StartDateTime" valuehalign="" type="" allowordering="true"/>
                <field id="EndDateTime" valuehalign="" type=""/>
            </fields>
            <rowactions>
                <action type="edit"/>
                <action type="delete"/>
            </rowactions>
            <massactions usefirstitemasdefault="true">
                <action type="massupdate"/>
                <action type="massdelete"/>
            </massactions>
            <views>
                <view type="standard"/>
            </views>
        </skootable>
    </components>
    <resources>
        <labels/>
        <css/>
        <javascript>
            <jsitem location="inlinesnippet" name="SwitchTimeZone" cachelocation="false">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());
});
</jsitem>
        </javascript>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>

Sofware Developer Guy

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

Zach McElrath

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.

Sofware Developer Guy

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.  

Zach McElrath

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 <iframe> 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.

Sofware Developer Guy

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

Jason Thurgood

@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.  

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="TimeZonePicker" limit="1" query="false" createrowifnonefound="true" datasource="salesforce" type="" sobject="Account" doclone="" unloadwarningifunsavedchanges="false">
            <fields>
                <field id="TimeZonePicker__ui" uionly="true" displaytype="PICKLIST" label="Alternate Time Zone" ogdisplaytype="TEXT" picklistsource="manual" defaultvaluetype="fieldvalue">
                    <picklistentries>
                        <entry value="America/Anchorage" label="Alaska Time"/>
                        <entry value="America/Los_Angeles" label="Pacific Time"/>
                        <entry value="America/Denver" label="Mountain Time (Denver)"/>
                        <entry value="America/Phoenix" label="Mountain Time (Phoenix)"/>
                        <entry value="America/Chicago" label="Central Time"/>
                        <entry value="America/Indiana/Indianapolis" label="Central Time (Indianapolis)"/>
                        <entry value="America/New_York" label="Eastern Time"/>
                    </picklistentries>
                </field>
            </fields>
            <conditions/>
            <actions>
                <action>
                    <actions>
                        <action type="custom" snippet="SwitchTimeZone"/>
                    </actions>
                    <events>
                        <event>row.updated</event>
                    </events>
                    <fields>
                        <field>TimeZonePicker__ui</field>
                    </fields>
                </action>
            </actions>
        </model>
        <model id="RunningUser" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="User">
            <fields/>
            <conditions>
                <condition type="userinfo" value="" field="Id" operator="=" enclosevalueinquotes="true" userinfotype="userid"/>
            </conditions>
            <actions/>
        </model>
        <model id="AppointmentType_CoachIntake" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Appointment_Type__c">
            <fields>
                <field id="Name"/>
                <field id="Id"/>
                <field id="Applies_To__c"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" value="Coach" enclosevalueinquotes="true" field="Applies_To__c"/>
            </conditions>
            <actions/>
        </model>
        <model id="Appointments" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Appointment__c">
            <fields>
                <field id="Appointment_Type__r.Name"/>
                <field id="Start_Date_and_Time__c"/>
                <field id="End_Date_and_Time__c"/>
                <field id="Name"/>
                <field id="Provider__c"/>
                <field id="Provider__r.Name"/>
                <field id="Provider_2__c"/>
                <field id="Provider_2__r.Name"/>
                <field id="Member__c"/>
                <field id="Member__r.Name"/>
                <field id="Appointment_Type__c"/>
                <field id="Appointment_Type__r.Id"/>
                <field id="Status__c"/>
                <field id="isClosed__c"/>
            </fields>
            <conditions logic="(1 OR 2) AND 3 AND 4">
                <condition type="modelmerge" value="" field="Provider__r.Registered_User__r.Id" operator="=" model="RunningUser" enclosevalueinquotes="true" mergefield="Id" novaluebehavior="noquery"/>
                <condition type="modelmerge" value="" field="Provider_2__r.Registered_User__r.Id" operator="=" model="RunningUser" enclosevalueinquotes="true" mergefield="Id" novaluebehavior="noquery"/>
                <condition type="fieldvalue" value="Appointment" enclosevalueinquotes="true" field="RecordType.DeveloperName"/>
                <condition type="fieldvalue" value="Confirmed" enclosevalueinquotes="true" field="Status__c"/>
            </conditions>
            <actions/>
        </model>
        <model id="AppointmentsToApprove" limit="" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Appointment__c">
            <fields>
                <field id="Appointment_Type__c"/>
                <field id="Appointment_Type__r.Name"/>
                <field id="Member__c"/>
                <field id="Member__r.Name"/>
                <field id="Start_Date_and_Time__c"/>
                <field id="End_Date_and_Time__c"/>
                <field id="Status__c"/>
                <field id="Notes__c"/>
                <field id="Appointment_Type__r.Applies_To__c"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" value="Scheduled" enclosevalueinquotes="true" field="Status__c"/>
                <condition type="fieldvalue" value="Coach" enclosevalueinquotes="true" field="Appointment_Type__r.Applies_To__c"/>
                <condition type="userinfo" value="" field="Provider__r.Registered_User__r.Id" operator="=" enclosevalueinquotes="true" userinfotype="userid"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <components>
        <wrapper uniqueid="sk-27od_H-379">
            <components>
                <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="TimeZonePicker" buttonposition="" uniqueid="sk-27ofbg-390" mode="edit">
                    <columns>
                        <column width="25%">
                            <sections>
                                <section title="Section A" collapsible="no" showheader="false">
                                    <fields>
                                        <field id="TimeZonePicker__ui" valuehalign="" type="">
                                            <label>Time Zone</label>
                                        </field>
                                    </fields>
                                </section>
                            </sections>
                        </column>
                        <column width="50%">
                            <sections>
                                <section title="Section B" collapsible="no" showheader="false">
                                    <fields/>
                                </section>
                            </sections>
                        </column>
                    </columns>
                </basicfieldeditor>
                <wrapper uniqueid="sk-2Dha26-141">
                    <components>
                        <template multiple="false" uniqueid="sk-2Dh_MF-202" allowhtml="true">
                            <contents>&lt;font size=3&gt;Appointments to Approve&lt;/font&gt;</contents>
                        </template>
                        <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="false" showexportbuttons="false" pagesize="all" createrecords="false" model="AppointmentsToApprove" buttonposition="" mode="readonly" allowcolumnreordering="false" uniqueid="sk-2Dhyxr-188" emptysearchbehavior="query" cssclass="hidetablefooter">
                            <fields>
                                <field id="Appointment_Type__c" hideable="false" uniqueid="fi-2Di4aO-214" valuehalign="" type="" showbydefault="true"/>
                                <field id="Member__c" hideable="false" uniqueid="fi-2Di4aQ-215" valuehalign="" type="" showbydefault="true"/>
                                <field id="Start_Date_and_Time__c" hideable="false" uniqueid="fi-2Di4aT-216" valuehalign="" type="" showbydefault="true"/>
                                <field id="End_Date_and_Time__c" hideable="false" uniqueid="fi-2Di4aV-217" valuehalign="" type="" showbydefault="true"/>
                                <field id="Status__c" hideable="false" uniqueid="fi-2Di4aW-218" valuehalign="" type="" showbydefault="true"/>
                            </fields>
                            <rowactions>
                                <action type="multi" label="Confirm" icon="sk-icon-save">
                                    <actions>
                                        <action type="updateRow" fieldmodel="AppointmentsToApprove" affectedrows="context" field="Status__c" enclosevalueinquotes="true" value="Confirmed"/>
                                        <action type="save">
                                            <models>
                                                <model>AppointmentsToApprove</model>
                                            </models>
                                        </action>
                                        <action type="requeryModels" behavior="standard">
                                            <models>
                                                <model>Appointments</model>
                                                <model>AppointmentsToApprove</model>
                                            </models>
                                        </action>
                                    </actions>
                                </action>
                                <action type="multi" label="Reject" icon="sk-icon-cancel">
                                    <actions>
                                        <action type="showPopup">
                                            <popup title="Appointment Rejection" width="80%">
                                                <components>
                                                    <buttonset model="AppointmentsToApprove" uniqueid="sk-2DjMSc-393">
                                                        <buttons>
                                                            <button type="multi" label="Save">
                                                                <actions>
                                                                    <action type="updateRow" fieldmodel="AppointmentsToApprove" affectedrows="context" field="Status__c" enclosevalueinquotes="true" value="Rejected"/>
                                                                    <action type="save">
                                                                        <models>
                                                                            <model>AppointmentsToApprove</model>
                                                                        </models>
                                                                    </action>
                                                                    <action type="closeAllPopups"/>
                                                                </actions>
                                                            </button>
                                                            <button type="multi" label="Cancel" secondary="true">
                                                                <actions>
                                                                    <action type="cancel">
                                                                        <models>
                                                                            <model>AppointmentsToApprove</model>
                                                                        </models>
                                                                    </action>
                                                                    <action type="closeAllPopups"/>
                                                                </actions>
                                                            </button>
                                                        </buttons>
                                                    </buttonset>
                                                    <template multiple="false" uniqueid="sk-2DikXQ-350" allowhtml="true">
                                                        <contents>&lt;font size=3&gt;Please describe why you are rejecting this Appointment&lt;/font&gt;</contents>
                                                    </template>
                                                    <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="AppointmentsToApprove" buttonposition="" uniqueid="sk-2Dih_S-340" mode="edit" layout="above">
                                                        <columns>
                                                            <column width="100%">
                                                                <sections>
                                                                    <section title="Section A" collapsible="no" showheader="false">
                                                                        <fields>
                                                                            <field id="Notes__c" valuehalign="" type="" required="true" uniqueid="fi-2Dkh7z-192" displayrows="4">
                                                                                <label>Rejection Reason</label>
                                                                            </field>
                                                                        </fields>
                                                                    </section>
                                                                </sections>
                                                            </column>
                                                        </columns>
                                                        <renderconditions logictype="and"/>
                                                    </basicfieldeditor>
                                                </components>
                                            </popup>
                                        </action>
                                    </actions>