World Clock Widget

How it works

The clock reads the visitor's device clock and converts it into each city's local time with the browser's built-in IANA time-zone database. Because the browser applies each zone's daylight-saving rules, the widget never needs manual updates when clocks change. Each row shows the city, its local weekday and date, the time and the current UTC offset, so a reader can see at a glance that Sydney is already on tomorrow while Los Angeles is still on yesterday. Offsets are measured, not looked up from a table: the widget formats the same instant in the zone and in UTC and subtracts, which is why half-hour and quarter-hour zones such as India (UTC+5:30) and Nepal (UTC+5:45) come out exactly. Zone names in the embed code are checked against the browser's own list; anything it does not recognise is dropped rather than guessed. The list refreshes every five seconds (every second when seconds are shown) and pauses while the page is hidden to save battery.

Method

• Local time = device UTC time converted with Intl.DateTimeFormat(timeZone = IANA zone)
• UTC offset (minutes) = wall-clock time in the zone read as if it were UTC - the actual UTC instant, truncated to the minute; shown as UTC+h or UTC+h:mm
• Zones are IANA names such as Asia/Kolkata, Europe/London or America/New_York; at most 12, unknown names dropped
• 12/24-hour default: 12-hour for en-US, en-IN, en-AU, en-CA, en-NZ, en-PH and en-PK locales, else 24-hour; v_format overrides
• Refresh: every 5 s, or every 1 s with v_seconds=1; paused while the frame is hidden

Worked examples

Limitations

• The time is only as right as the visitor's device clock; the widget never contacts a time server.
• A country that changes its clock rules at short notice is shown correctly only after the visitor's browser or operating system ships the updated tz release.
• Each row is labelled with the last part of the IANA name (Asia/Kolkata shows as Kolkata); custom city labels, flags and time-zone abbreviations such as IST or EST are not shown, because abbreviations are ambiguous.
• Invalid zone names are dropped without a message; if none is valid the six default cities appear.

Where publishers use it

• Remote teams and agencies showing office hours across countries on a contact page
• Travel and visa blogs showing the destination's local time
• Customer-support pages that show when each regional desk is awake
• Event and webinar pages with a global audience

Questions

Sources

1. Time Zone Database (tz / zoneinfo) - IANA . Zone names, UTC offsets and daylight-saving rules; the widget uses the copy built into the visitor's browser
2. ECMAScript Internationalization API Specification (ECMA-402), Intl.DateTimeFormat - Ecma International TC39 . How browsers format an instant in a named IANA time zone

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools World Clock
https://a2z.tools/embed/world-clock

<a href="https://a2z.tools/embed/world-clock">A2Z Tools World Clock</a>

[A2Z Tools World Clock](https://a2z.tools/embed/world-clock)

World Clock by A2Z Tools - https://a2z.tools/embed/world-clock