Edit Timezone Selector

Name

Also known as (comma separated)

Brief definition Control for choosing a timezone.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "utcHour", "type": "number", "label": "UTC hour", "default": 15, "min": 0, "max": 23, "step": 1 }, { "id": "utcMinute", "type": "number", "label": "UTC minute", "default": 30, "min": 0, "max": 59, "step": 5 }, { "id": "timezone", "type": "select", "label": "Timezone", "default": "America/New_York", "options": [ "America/New_York", "Europe/London", "Asia/Tokyo" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#D9C8F0", "presets": [ "#D9C8F0", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"tzs\" data-hour=\"{{utcHour}}\" data-minute=\"{{utcMinute}}\" data-tz=\"{{timezone}}\">\n <p class=\"tzs__utc\">{{utcHour}}:{{utcMinute}} UTC in&hellip;</p>\n <p class=\"tzs__zone\" style=\"color:{{accent}};\">{{timezone}}</p>\n <p class=\"tzs__value\">&nbsp;</p>\n</div>\n<script>(function () {\n var el = document.querySelector(\".tzs\");\n if (!el) return;\n var d = new Date(Date.UTC(2026, 0, 15, Number(el.dataset.hour), Number(el.dataset.minute)));\n var fmt = new Intl.DateTimeFormat(\"en-GB\", { timeZone: el.dataset.tz, hour: \"2-digit\", minute: \"2-digit\", weekday: \"short\" });\n el.querySelector(\".tzs__value\").textContent = fmt.format(d);\n})();</script>\n<style>\n.tzs { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 280px; box-sizing: border-box; }\n.tzs__utc { margin: 0 0 4px; font-size: 11px; color: #24143099; }\n.tzs__zone { margin: 0 0 12px; font: 700 13px ui-monospace, monospace; }\n.tzs__value { margin: 0; font-size: 24px; font-weight: 800; }\n</style>", "tailwind": "<div class=\"tzstw font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[280px] box-border\" data-hour=\"{{utcHour}}\" data-minute=\"{{utcMinute}}\" data-tz=\"{{timezone}}\">\n <p class=\"m-0 mb-1 text-[11px] text-[#24143099]\">{{utcHour}}:{{utcMinute}} UTC in&hellip;</p>\n <p class=\"m-0 mb-3 font-mono font-bold text-[13px]\" style=\"color:{{accent}};\">{{timezone}}</p>\n <p class=\"tzstw__value m-0 text-2xl font-extrabold\">&nbsp;</p>\n</div>\n<script>(function () {\n var el = document.querySelector(\".tzstw\");\n if (!el) return;\n var d = new Date(Date.UTC(2026, 0, 15, Number(el.dataset.hour), Number(el.dataset.minute)));\n var fmt = new Intl.DateTimeFormat(\"en-GB\", { timeZone: el.dataset.tz, hour: \"2-digit\", minute: \"2-digit\", weekday: \"short\" });\n el.querySelector(\".tzstw__value\").textContent = fmt.format(d);\n})();</script>", "react": "import { useMemo } from \"react\";\n\nexport function TimezoneSelector({\n utcHour = {{utcHour}},\n utcMinute = {{utcMinute}},\n timezone = \"{{timezone}}\",\n accent = \"{{accent}}\",\n}) {\n const value = useMemo(() => {\n const d = new Date(Date.UTC(2026, 0, 15, utcHour, utcMinute));\n return new Intl.DateTimeFormat(\"en-GB\", { timeZone: timezone, hour: \"2-digit\", minute: \"2-digit\", weekday: \"short\" }).format(d);\n }, [utcHour, utcMinute, timezone]);\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 280, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 4px\", fontSize: 11, color: \"#24143099\" }}>{utcHour}:{utcMinute} UTC in&hellip;</p>\n <p style={{ margin: \"0 0 12px\", fontFamily: \"ui-monospace, monospace\", fontWeight: 700, fontSize: 13, color: accent }}>{timezone}</p>\n <p style={{ margin: 0, fontSize: 24, fontWeight: 800 }}>{value}</p>\n </div>\n );\n}" }