Walk-up Experience operational hours display UTC offset instead of time zone abbreviationIssue <!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } In the base system, the operational hours in the About this location section of the Walk-up Check-in portal page (walkup_online_checkin) display the time zone in UTC offset format (for example, +0530 or +08) instead of a named abbreviation (for example, IST or MYT). This article explains how to display the time zone in string abbreviation format. Symptoms<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } The Walk-up Check-in portal page displays the time zone as a UTC offset (for example, +0530, +08) rather than a named abbreviation (for example, IST, MYT).This behavior occurs in the About this location section of the walkup_online_checkin page. Release<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } All Cause<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } There are two different scenarios with two separate causes and solutions. Scenario 1 - India location displaying +0530 If, for example, the selected location is for India, the OOB time format that needs to be used is Asia/Kolkata.If this choice is inactive on the instance, the timezone format would be displayed as +0530. In this case, the issue might be that the Asia/Kolkata timezone is inactive on the instance:https://instance_name.service-now.com/sys_choice.do?sys_id=a4938a59c6112278002c91038db3affb Scenario 2 - Malaysia location displaying +08 If, for example, the selected location is for Malaysia, the OOB time format that needs to be used is Asia/Kuala_Lumpur. In this case, the behaviour is expected. The displayed widget is Online check-in experience:https://instance_name.service-now.com/nav_to.do?uri=sp_widget.do?sys_id=f84cfc133b7303001d132c2b54efc476The definition for the timezones and their formats comes from moment-timezone-with-data-2010-2020-v0.5 dependency:https://instance_name.service-now.com/nav_to.do?uri=sp_dependency.do?sys_id=db6689c1cb11120000f8d856634c9c3bwhich, in the end, uses the open source JavaScript library momentjs:https://momentjs.com/timezone/In momentjs, the Malaysian Timezone does NOT have an abbreviation of MYT but rather +08. ServiceNow platform is simply using what is coming from momentjs.The reason that Asia/Kolkata works as expected after activating the choice is that Asia/Kolkata has an abbreviation of IST defined in the momentjs open source library, unlike Asia/Kuala_Lumpur. There are two scenarios, each with a separate cause. Scenario 1 — India location displaying +0530 When the selected location is in India, the base system time zone format requires Asia/Kolkata. If that choice is inactive on the instance, the time zone displays as +0530. To verify, check whether the Asia/Kolkata time zone is inactive in the sys_choice table:`https://<instance-name>.service-now.com/sys_choice.do?sys_id=a4938a59c6112278002c91038db3affb` Scenario 2 — Malaysia location displaying +08 When the selected location is in Malaysia, the base system time zone format uses Asia/Kuala_Lumpur. This behavior is expected. The displayed widget is the Online check-in experience:`https://<instance-name>.service-now.com/nav_to.do?uri=sp_widget.do?sys_id=f84cfc133b7303001d132c2b54efc476` Time zone definitions and their formats come from the `moment-timezone-with-data-2010-2020-v0.5` dependency:`https://<instance-name>.service-now.com/nav_to.do?uri=sp_dependency.do?sys_id=db6689c1cb11120000f8d856634c9c3b` This dependency uses the open-source JavaScript library [momentjs](https://momentjs.com/timezone/). In momentjs, the Malaysian time zone (Asia/Kuala_Lumpur) does not have an abbreviation of MYT — it uses +08 instead. The ServiceNow platform uses the abbreviation as defined in momentjs. Asia/Kolkata works correctly after activation because momentjs defines IST as its abbreviation, which Asia/Kuala_Lumpur does not have. Resolution<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } Scenario 1 — Activate the Asia/Kolkata time zone Activate the Asia/Kolkata sys_choice on your instance. For instructions, refer to the following ServiceNow documentation: Time zones Change the time zone choice list --- As mentioned above, Scenario 2 is working as expected since ServiceNow has no control on the data defined in open source library momentjs. However, the timezone format is being used in Angular Provider formatWalkUpSchedulehttps://instance_name.service-now.com/nav_to.do?uri=sp_angular_provider.do?sys_id=b413345153041300c6bfddeeff7b12b6 function createTimeSpan(start, end) { return { fStart: start, fEnd: end, start: start.format('h:mma'), end: end.format('h:mma (z)') };} A possible workaround involves customizing the above Angular Provider formatWalkUpSchedule based on examples found on the momentjs documentation itself:https://momentjs.com/timezone/docs/#/using-timezones/formatting/ 1. In Angular Provider formatWalkUpSchedule, add the following function to override the default moment.fn.zoneName function. You can specify whichever timezone format you want to override and can add more abbreviations as needed or override them with whatever string you like. In below example, we are overriding:- +08 with MYT- +07 with Asia/Bangkok moment.fn.zoneName = function(){ var abbrs = { '+08' : 'MYT', '+07' : 'Asia/Bangkok' }; var abbr = this.zoneAbbr(); return abbrs[abbr] || abbr;} 2. On the same Angular Provider formatWalkUpSchedule, in function createTimeSpan(), replace: end: end.format('h:mma (z)') with end: end.format('h:mma (zz)') After above changes, the timezone for the Malaysia location would look like this: Scenario 2 — Workaround for Malaysia and other UTC offset time zones Scenario 2 is expected behavior. The ServiceNow platform does not control the abbreviation data defined in the open-source momentjs library. However, you can customize the Angular Provider formatWalkUpSchedule to override the displayed abbreviation. The time zone format is used in this provider: https://<instance-name>.service-now.com/nav_to.do?uri=sp_angular_provider.do?sys_id=b413345153041300c6bfddeeff7b12b6 For reference, see the momentjs timezone formatting documentation. Note: The following steps describe a custom implementation that is not supported by ServiceNow. Step 1 — Override the default zone name function In the Angular Provider formatWalkUpSchedule, add the following function to override the default moment.fn.zoneName function. You can specify which time zones to override and add abbreviations as needed. In the following example, +08 is overridden with MYT and +07 is overridden with Asia/Bangkok: javascriptmoment.fn.zoneName = function(){ var abbrs = { '+08' : 'MYT', '+07' : 'Asia/Bangkok' }; var abbr = this.zoneAbbr(); return abbrs[abbr] || abbr; } Step 2 — Update the createTimeSpan function In the same Angular Provider formatWalkUpSchedule, locate the createTimeSpan() function and replace: javascriptend: end.format('h:mma (z)') with: javascriptend: end.format('h:mma (zz)') After these changes, the time zone for the Malaysia location displays the overridden abbreviation (for example, MYT) instead of the UTC offset. Related Links<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } Time zones Change the time zone choice list momentjs timezone library momentjs timezone formatting documentation