This sample demonstrates how to set the time zone used to display dates and times. A weather station’s observation timestamp illustrates how the displayed time changes without modifying the underlying data. The Map component and Scene component use the same time zone configuration.

The timeZone property on the Map component and Scene component supports the following values:

• "system" displays dates and times in the device’s time zone.
• An IANA time zone identifier, such as "Europe/Zurich", displays dates and times in that time zone.
• "unknown" displays dates and times without time zone adjustments.

Wait for the component to be ready before setting its timeZone property. The same approach works with either a Map component or a Scene component.

const viewElement = document.querySelector("arcgis-map");
await viewElement.viewOnReady();
viewElement.timeZone = "Europe/Zurich";

The Calcite Input Time Zone component supplies an IANA time zone identifier when configured with mode="region". Listen for its calciteInputTimeZoneChange event to apply the selected time zone to the component.

const timeZoneInput = document.querySelector("calcite-input-time-zone");
timeZoneInput.addEventListener("calciteInputTimeZoneChange", () => {
  viewElement.timeZone = timeZoneInput.value;
});

Related samples and resources

Timestamp-offset field

Sample Code

Time Bar component

Sample Code

arcgis-time-zone-label

References