Time dial
Spin a dial to pick an hour and see which team cities are at work.
Call planner
The value is UTC minutes from midnight. Each city keeps a fixed offset, so pass a DST-correct offset for the day you are planning. The shaded band is the shared working day, 9:00 to 18:00 by default. Drag the dial, or focus it and use the arrow keys in 15 minute steps.
Drag around the dial or use the arrow keys in 15 minute steps. Page Up and Page Down move by an hour.
<neura::time-dial
:cities="[
['id' => 'nyc', 'name' => 'New York', 'code' => 'NYC', 'offset' => -240],
['id' => 'sf', 'name' => 'San Francisco', 'code' => 'SF', 'offset' => -420],
['id' => 'lon', 'name' => 'London', 'code' => 'LON', 'offset' => 60],
['id' => 'tyo', 'name' => 'Tokyo', 'code' => 'TYO', 'offset' => 540],
]"
:value="960"
:weekday="1"
label="Call time"
/>24-hour readout
Set the hour cycle to 24 when the locale reads 09:30 rather than 9:30 AM. Find overlap jumps to the earliest quarter hour where the most cities sit inside the working band. Reset returns to the initial time and home city.
Drag around the dial or use the arrow keys in 15 minute steps. Page Up and Page Down move by an hour.
<neura::time-dial
:cities="$cities"
:value="960"
:weekday="1"
:hour-cycle="24"
label="Release time"
/>Props
Two to five cities.
offset is minutes from UTC, in steps of 15. value may leave 0–1439 when a city crosses midnight.
| Prop | Default | Role |
|---|---|---|
| cities | — | id, name, code, offset |
| value | 0 | UTC minutes from midnight |
| home-id | first city | City the center reads |
| hour-cycle | 12 | 12 or 24 |
| working-hours | 9:00–18:00 | Local minutes, drawn as the band |
| weekday | 1 | 0 is Sunday, in UTC |
| min / max | none | The dial stretches past a bound and springs back |