Global Timezone Meeting Planner and Scheduler

Overview

A high-performance, client-side web application designed to eliminate scheduling friction for global, distributed teams. The tool provides a visual interface for comparing timezones, identifying overlapping business hours, and managing international appointments.

Design System & UI/UX

• Color Palette:
  • Background: #F4F7F6 (Light Grey)
  • Day Mode (08:00 - 18:00): #FFC107 (Soft Amber)
  • Night Mode (18:00 - 08:00): #263238 (Deep Slate)
  • Text: #37474F
• Layout Structure:
  • Sidebar (Left): Location management (Add/Remove locations), searching via city or country.
  • Main Stage (Center): Horizontal scrolling timeline (24-hour view). Each row represents a location.
  • Header: Current date and global 'Now' time marker.
• Animations:
  • Smooth transition when adding/removing locations.
  • Interactive hover state on timeline slots that displays specific local time.

Feature Set

1. Dynamic Timeline Visualization: A 24-hour horizontal scrollbar that shifts all timezones in sync.
2. Smart Availability Highlighting: Automatically dims non-business hours (customizable per location).
3. Cross-Timezone Selection: Click and drag to highlight a meeting window; automatically calculates the time in all selected locations.
4. Calendar Integration: Generate mailto: links with subject/body populated with meeting times or direct ics file download triggers.
5. Local Persistence: Users' selected locations are saved in localStorage for immediate recall.
6. Responsive Layout: Fully functional on mobile and desktop via CSS Grid.
7. Real-Time Clock: A vertical indicator line showing the 'current time' globally, moving in real-time.

Technical Implementation

• Framework: Vanilla JavaScript or React for minimal overhead.
• Data Handling: Intl.DateTimeFormat for timezone offsets and date-fns-tz for timezone calculations.
• Storage: LocalStorage API.
• Styling: CSS Modules with Flexbox/Grid for high-performance layout rendering.