Clock widget

Who it’s for

Anyone building a dashboard that other people check from different places asks “what time is it where this equipment actually is, not wherever my browser happens to be?” A shift supervisor wants the plant’s own local time on a shared screen, no matter who is looking at it or from where. An operations lead running sites in three countries wants all three clocks side by side in one card, instead of lining up three separate widgets and keeping them in sync.

What it does

Set to World clock with three rows — Kyiv, London, and New York — the card lists each city’s live time, prints +3h / −5h next to the ones ahead of or behind the main zone, and flags any row that has already rolled into the next calendar day.

• Four layouts in one widget — a digital readout, an analog dial, both together, or a multi-zone world clock, switched with one setting instead of four different widgets
• Shows any time zone, not just the viewer’s — a fixed zone, the dashboard’s own time window zone, or the browser’s local time, with daylight saving handled automatically
• Auto-scaling text that fills the card at any size, so one setup looks right whether the widget is a small tile or a full-screen panel
• Custom time and date patterns, written token by token, for a format the built-in choices don’t cover
• A world clock row for every extra zone, each with its own label and an optional difference-from-the-main-zone readout
• Runs on its own from the moment it’s added — it reads no device, telemetry, or datasource, so there is nothing to bind before it starts ticking

How to set up

Data keys

This is a static widget with no datasource. Leave the Data tab empty — the widget reads the current time itself and needs no bound key.

Time zone

Setting	Default	Effect
Take the time zone from	The viewer’s browser	The viewer’s browser: uses the device the dashboard is open on. The dashboard time window: uses the time zone set on the dashboard’s own time window instead. A fixed time zone: always shows the zone you pick below, no matter who is viewing or what the dashboard is set to.
Time zone	UTC	Only used with A fixed time zone. Pick a zone from the curated list, or choose Other and type any IANA time zone name (for example Europe/Kyiv or America/Argentina/Buenos_Aires) into IANA time zone name. An unrecognized name falls back to the viewer’s browser zone.

World clock zones

Only shown when Layout is World clock.

Setting	Default	Effect
Time zones	Kyiv, London, New York	Add, remove, or reorder the rows the World clock layout shows. Each row picks its own time zone from the same list (plus Other) and takes an optional row label — leave the label blank and the row shows the city name from the zone automatically.

How to customize

Layout and position

• To choose the layout — set Layout to Digital, Analog, Analog + digital, or World clock.
• To arrange the combined layout — set Analog and digital arrangement to follow the card shape, sit side by side, or stack (shown only when Layout is Analog + digital).
• To position the clock in the card — set Horizontal alignment and Vertical alignment.
• To make one setup look right at any card size — leave Scale the clock to fill the card on and adjust Fill this much of the card; turn it off to use the font sizes below as fixed pixel sizes instead of proportions.

Time display

• To switch between 12- and 24-hour time — set Clock.
• To hide seconds — turn off Show seconds.
• To draw more attention to the ticking clock — turn on Blink the separator every second.
• To write your own time layout — turn on Use a custom time pattern and set Custom time pattern, using the tokens below.

Date and zone label

• To hide the date — turn off Show the date.
• To change how the date reads — set Date format (full, long, medium, short, two weekday-only options, or ISO), or pick Custom pattern and write your own Custom date pattern.
• To show which zone the clock is in — turn on Show a time zone label and set Label shows to the city, a short or long zone name, or the UTC offset.
• To move the date and zone label — set Place the date and label once Show the date or Show a time zone label is on; the analog layout always puts them under the dial regardless of this setting.

Fonts and colours

• To restyle the time — set Time font and Time colour; these also cover the dial numerals and the world clock rows.
• To restyle the date and zone label — set Date font and Date colour; these also cover AM/PM.

Analog dial

• To recolor the dial face and hands — set Dial fill, Border and ticks, Hour and minute hands, and Second hand colour.
• To change the tick marks and numerals — set Ticks (minutes and hours, hours only, quarters only, or none) and Numerals (1–12, I–XII, just 12/3/6/9, or none).
• To change or hide the second hand — set Second hand to sweeping, stepping once a second, or none; Second hand colour only applies when it’s not set to none.

World clock rows

• To label a row yourself — set that row’s Row label; leave it blank to use the city name from the zone automatically.
• To show how far each row is from the main zone — turn on Show the difference from the main zone; it also flags rows that have already rolled into the next calendar day.
• To show the date on every row — turn on Show the date on every row.
• To remove the lines between rows — turn off Divider between rows.

Format tokens

Custom time pattern and Custom date pattern share one token set, so either field accepts any of these tokens — not only the ones listed in its own hint. Wrap literal text in square brackets so it passes through unchanged: HH[h]mm renders as 14h09.

Tokens	Renders
YYYY YY	2026, 26
MMMM MMM MM M	August, Aug, 08, 8
DD D dddd ddd	18, 18, Tuesday, Tue
HH H hh h	14, 14, 02, 2
mm ss SSS	minutes, seconds, milliseconds
A a	AM/PM, am/pm
ZZ Z zzz	UTC+03:00, +03:00, EEST

Tips

• Time zones follow standard DST rules automatically, including half-hour and 45-minute offsets like India or Nepal — there’s nothing extra to configure for daylight saving.
• The curated time zone lists cover common cities; anything missing is one Other selection and an IANA time zone name away.
• The clock follows the viewer’s own device clock unless Take the time zone from is set to the dashboard or a fixed zone — a wrong device clock still shows the wrong time under Browser mode.