Building a World Clock with a Smart Meeting Planner for Remote Teams

In an increasingly distributed world, aligning schedules across time zones has become one of the most persistent friction points in remote collaboration. This week for Project52, I decided to address that head-on.

I built a fully in-browser, interactive World Clock and Meeting Planner that combines live time data, global visualizations, and intelligent overlap suggestions — all with a clean, responsive interface that requires no backend and no setup.

This project is about more than just showing the time — it’s about building spatial awareness of when and how people around the world live and work. It’s about making distributed collaboration more human.

You can access the World clock here.

The Problem: Time Zones Are Invisible

When you work with people in other countries, time zones are an invisible tax. Scheduling a call means guessing whether 9 AM in Montreal is still within business hours in Singapore, or if 3 PM in Paris might already be dinner time in Tokyo. Most people resort to juggling time zone converters and crossing their fingers.

It’s inefficient. It’s frustrating. And worst of all — it’s unnecessary.

This project reimagines that interaction from the ground up. I wanted something more intuitive, more visual, and more intelligent.

The Solution: Time Made Visible

At its core, the tool does three things:

1. Live World Clock Cards

Each city is represented by a dynamic card showing:

• The current local time (updated every second)

• The current date

• A contextual weather snapshot based on typical conditions

• A small marker on a world map, visually pinpointing location

Users can add or remove cities with a single click, and the UI updates in real time. The interface is designed for clarity, with bold typography, shadows, hover interactions, and smooth animations — not just for aesthetics, but to make the tool a pleasure to use.

2. Interactive Day/Night Map

Behind the cities is a beautifully rendered world map with a dynamic overlay that shifts gradually to reflect the global terminator — the line dividing night and day.

As UTC time progresses, the overlay slides horizontally across the map, casting parts of the world into dusk or light. The position is updated once per second, giving the sense of a living, breathing planet. Each city’s marker pulses gently, adding a touch of movement that helps ground the interface.

The day/night visualization isn't just cosmetic — it serves as a visual guide. You can now see at a glance which teammates are starting their day, who’s in the middle of work, and who might already be asleep.

3. Smart Meeting Planner

Perhaps the most practical component is the built-in meeting planner. With one click, users can toggle a panel that evaluates potential meeting times and provides clear guidance on the best possible overlap across all selected cities.

Here’s what it does:

• It evaluates a range of times from early morning to late evening (UTC-based)

• For each city, it determines whether a time falls within core working hours (9 AM – 6 PM)

• It scores each slot based on how many cities are in business hours, how many are in “reasonable” hours, and how many are outside those bounds

• It then highlights the best meeting time and displays a full breakdown of local hours per city

The result is a simple, readable grid that clearly shows when the most people are available — without asking users to calculate anything.

Design Philosophy

From the beginning, I wanted this tool to feel more like a companion and less like a spreadsheet.

That meant thoughtful attention to:

• Typography – using clean, legible fonts with distinct hierarchy

• Color and contrast – warm cards, soft shadows, and crisp labels

• Motion – from subtle hover lifts to animated weather icons and day/night transitions

• Responsiveness – fully usable on mobile and desktop

• Simplicity – no login, no authentication, no backend — just load and use

Everything is built using standard web technologies: HTML, CSS, and vanilla JavaScript. The logic behind time conversion uses the browser’s native Intl.DateTimeFormat API to ensure accurate local times across all time zones. Weather data is simulated with realistic patterns depending on location and time of day.

Technologies Used

• HTML & CSS Grid/Flexbox – for layout and structure

• JavaScript (Vanilla) – for live time updates, DOM rendering, and planner logic

• Intl.DateTimeFormat – to handle time zone differences natively in the browser

• LocalStorage – to preserve city selections between sessions

• CSS Transforms & Animations – to bring life to clocks, overlays, and interactions

• Aspect-ratio & pixel mapping – to place markers accurately on the world map

• No external libraries – 100% pure code

How to Use It

Using the World Clock and Meeting Planner is simple, intuitive, and requires no sign-up or installation. Everything runs entirely in your browser.

1. Start with the Preloaded Cities

When you first open the tool, you’ll see a world map with real-time clocks for major cities like Vancouver, Montreal, Paris, Dubai, Singapore, and Tokyo. Each city is marked on the map and displayed as a clock card below, showing the current time, date, and simulated weather.

2. Add More Cities

Want to include your teammates’ locations? Just type a city name into the input field (e.g., London, Mumbai, New York) and click “Add City.” The tool supports dozens of popular cities, and each one appears instantly with accurate time and coordinates.

3. Visualize Time Zones at a Glance

The dynamic world map includes a shifting day/night overlay that reflects the Earth’s rotation in real time. This gives you immediate context — you’ll know who’s starting their day, who’s in the middle of work, and who’s probably asleep.

4. Open the Meeting Planner

Click “Show Planner” to activate the built-in scheduler. The tool automatically evaluates common meeting times (6AM–10PM UTC) and highlights the best slot based on how many cities are within working hours (9AM–6PM local time).
Each slot shows:

• The local time in each city

• A visual score (Excellent, Good, Poor)

• A breakdown of who’s available and when

5. Customize and Reuse

Your selected cities are saved in your browser using localStorage, so you can come back later without losing your setup. You can remove cities at any time, and the interface updates instantly.

You can access the World clock here.

Why This Matters

Time is the great equalizer, but time zones remain an invisible wall. Tools like this one begin to chip away at that barrier.

By making time visible — literally — and aligning it with the rhythms of business and biology, we enable teams to collaborate more fairly, more respectfully, and more productively. Whether you're a founder managing teams in three continents, a designer collaborating with a dev team abroad, or simply someone who needs to know when to ping your friend in Tokyo, this tool makes it intuitive.

And that’s the core of this project: intuitive time awareness for a distributed world.

Try it here:

You can access the World clock here.

Next Steps

This is just the beginning. I also plan to:

• Add city search autocomplete powered by timezone APIs

• Let users customize working hours and display rules

• Add CSV export for meeting windows

• Integrate real-time weather APIs for live forecasts

• Package the tool as a free public utility for global teams

If you're interested in helping test or contributing ideas, reach out. I'd love to collaborate on making this even better.

Project52 continues. One project a week. No skipping. No excuses.
Thanks for reading — and if you're managing a global team, I hope this one helps you just a little bit more than a timezone chart ever could.

by Atul Verma
Creator, Project52 🚀