shadcn.io is not affiliated with official shadcn/ui
Time Zone Converter Calendar Block for Solid
One date and time in one city turned into the local time in up to six cities, each with a plus or minus one day word and whether it falls inside 09:00 to 18:00, with cities to add or remove and a copyable summary.
Installation
Overview
Find a meeting time that works across cities, with this time zone converter for Solid with Ark UI. It is the planning view of Farhour, a remote-team meeting planner: a Field band with a date Input, a time input and a Native Select for the city the time is in, then a table that gives each of five cities its local date and time, a "+1 day", "-1 day" or "Same day" word, and a mark for whether that time is inside 09:00 to 18:00 there ("Within 09:00 to 18:00" or "Outside"). Under the table a second select adds a city from the rest, each row's button takes one off (the starting city stays), and Copy summary, the only Shine Button, puts the whole answer on the clipboard as text. Each city has one fixed offset from UTC, said in words ("1 hour ahead of UTC"), for 14 to 24 October 2026, and the page says there is no daylight saving. The bands are ruled by Guides. Below the small breakpoint the working-hours column folds under the local time. For remote teams, event pages and any app that has to name a time in someone else's day.
FAQ
How do I change the cities or their offsets?
Edit CITIES. Each has an id, a name and an offset in minutes from UTC (330 for a half-hour zone such as Mumbai). START_IDS lists the five cities shown first, and MAX_CITIES caps how many can be on show. Working hours are OPENS and CLOSES, in minutes after midnight.
Why fixed offsets and no daylight saving?
Because a real zone's offset depends on the date and its rules change. The block names no zone database and uses no Intl time zones: it holds one number of minutes per city and the sentence says the window it is true for, 14 to 24 October 2026, when London and Berlin are still on summer time and New York is too. A date outside the window is refused with that sentence. In your app compute offsets on the server from a zone database for the exact date.
How is the local time worked out?
The time you type is read in the "In" city, turned into one moment by taking its offset away, and each city adds its own offset back. The day word compares the city's date with the date you chose. Nothing reads the device's clock or time zone, so the table is the same for everyone.
What does Copy summary copy?
A line with your date, time and city, then one line per city with its date, time, day word and whether it is inside working hours, as plain text. It uses the browser's clipboard; if that is not available the status message says so and the table can be selected instead. Nothing is sent anywhere.