shadcn.io is not affiliated with official shadcn/ui
Time Zone Coordinator Chat Block for Svelte
A team thread beside four clocks: slide a meeting time in 15-minute steps and see each person's local time, whether it falls in their working hours, and the window everyone shares.
Installation
Overview
Find a time that works across continents, with this time zone coordinator chat for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Orbitime, a distributed team's chat: a thread about a design sync and, at the end, a Team clocks pane. A Slider sets "Meeting at your time" from 00:00 to 23:45 in 15-minute steps, and four people (you in Lisbon, and teammates in Lagos, Singapore and Vancouver) show their local time, the day it falls on, a drawn bar of their day with 09:00 to 18:00 shaded and the meeting as a tick, and the words "In hours" or "Outside hours". A readout reads "Everyone is in hours between 17:00 and 18:00 your time" or "No shared window" with the best fit, for the clocks you have included with a checkbox. "Propose this time" posts a message with all the local times, and a typed teammate answers behind a Typing Indicator Text. The composer's Shine Button is the only colored control, and on a phone a Toggle Group switches between Chat and Clocks. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a remote team's scheduling thread or a world clock beside a conversation.
FAQ
Where do the local times come from?
Each person has a typed offset from UTC in minutes (Lisbon +60, Singapore +480, Vancouver -420) and your meeting time is applied to them with plain arithmetic, wrapping around midnight and reporting the day as previous, same or next. Nothing uses Intl or the clock, so the page reads the same on every machine. The offsets are those for 12 October; a real app should use a time zone database and the meeting's date.
How is the shared window found?
A pure function counts how many included people are in working hours at each of the 96 slots of your day, takes the highest count, and returns the longest unbroken stretch at that count. If the count equals the number of included people, everyone shares it; otherwise the readout names the best fit. Uncheck Singapore and the window becomes 17:00 to 18:00; uncheck Vancouver and it becomes 09:00 to 11:00.
How are the bars drawn, and are they accessible?
Each bar is a track with a shaded span for working hours and a tick for the meeting, positioned with CSS variables in percent. They are decorative: the same facts are in text beside them (the time, the day and "In hours" or "Outside hours"), so nothing depends on seeing the bar.
What stays in the page, and how do I make it real?
Everything. "Propose this time" posts into local state and a teammate's reply comes from a short typed script; nothing is sent and no calendar is touched. To wire it for real, send the proposal to your server where post says so. The related Meeting Scheduler Chat shows a grid of slots instead of a slider.
Is it usable with a keyboard and a screen reader?
The slider is a labelled control with a value read as "Meeting at 15:00 your time", arrow keys move it by 15 minutes, each checkbox is named with its city, and one status line under the window announces what was sent. The clocks pane is a labelled region and the avatars are decorative.