Free Online Timezone Meeting Planner & Global Schedule Converter

Overview

A high-performance, single-file browser utility designed to eliminate the friction of scheduling international meetings. This tool offers a visual, interactive grid interface that maps multiple timezones against a 24-hour timeline, allowing users to instantly spot ideal meeting windows for global teams.

Core Feature List

• Dynamic Timezone Management: Add/Remove locations using a robust autocomplete search (leveraging the Intl.DateTimeFormat API for data).
• Visual Timeline Slider: A central horizontal slider that scrolls through a 24-hour period across all added locations.
• Smart Work-Hour Highlighting: Automatic detection of "business hours" (defaulting to 9:00 AM to 5:00 PM) shown as distinct background colors for each timezone row.
• Reference Time Sync: The primary timezone (user's local) stays pinned as the reference for all other calculated offsets.
• Copy to Clipboard: A quick action button to copy the selected meeting time and summary to share via email or messaging apps.
• Keyboard Navigation: Full support for arrow keys to shift time forward/backward.

UI Layout Specification

• Header: Clean, minimal title (no branding) with a brief instructional sub-text.
• Input Section: A clean "Add Location" input field with a dropdown of common timezones/cities.
• Visualization Grid: A tabular layout where each row represents a city. Each row contains a label (City Name, Current Time) and a scrollable hourly row that changes color based on the selected hour (day/night visual contrast).
• Sticky Controller: A sticky top-level bar that shows the currently selected "Meeting Time" and provides "-1 Hour", "+1 Hour" controls.

Color Palette (Light Mode Only)

• Primary Surface: #FFFFFF (Pure white background).
• Accent: #2563EB (Professional blue for primary actions).
• Text: #1F2937 (Dark slate for readability).
• Secondary Text: #6B7280 (Muted gray for labels).
• Highlight (Working Hours): #DCFCE7 (Light green) with border #86EFAC.
• Highlight (Non-Working Hours): #F3F4F6 (Light gray).

Animations & Micro-interactions

• Smooth Transitions: All time adjustments trigger a subtle CSS transition: all 0.3s ease to ensure the timeline shifts feel fluid rather than jumpy.
• Interactive Hover: Rows lift slightly with a soft shadow (box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)) when hovered.
• Fade-in/out: Locations added to the list should animate in with a 200ms opacity fade and Y-axis slide.

Developer Technical Directives

• Architecture: Single HTML file containing all logic, styles, and markup. Use <script> tags for Vanilla JS and <style> for CSS.
• No Persistent Storage: Do not use localStorage, sessionStorage, or cookies. Use an array of objects in memory to track selected locations.
• No Popups: Use hidden div elements with absolute positioning for custom modal alerts if required.
• CDN Policy: Use reliable CDNs (e.g., Unpkg, JSDelivr) for essential dependencies like date-fns or dayjs for timezone manipulation if needed.
• Sandbox Safety: All links must include target="_blank" rel="noopener noreferrer". Ensure no calls to blocked APIs (e.g., alert(), prompt()).