Timezone Planner
Stack cities vertically and find the hour nobody has to wake up for.
IntermediateWeb appTool8–16hAI-buildable 4/5no setupworth shipping
Add several cities and see their local times aligned on one horizontal axis, with working hours shaded. Drag the time cursor and every row updates. It makes the answer visually obvious, and daylight saving means the rows don't always shift together.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Add cities and see their local times on aligned rows
- Working hours shade differently from night hours
- A draggable time cursor updates every row at once
- Rows highlight where all cities are within working hours
- Date changes across the international date line are shown
- Daylight saving transitions are handled correctly
- The city list persists
The interesting part
- Cities shifting by different amounts across a daylight saving boundary
- Rendering a day that is 23 or 25 hours long without misaligning the axis
- Keeping the alignment exact while the cursor is dragged
Once it works
- Add a shareable link encoding the cities and time
- Add calendar export for the chosen slot
- Add per-person custom working hours
Suggested stack
reacttypescripttailwinddate-fns