Timezone Meeting Overlap Finder — Computed Shared Availability Across Multiple Zones

<div class="demo">
  <div class="overlap-card">
    <div class="overlap-head">
      <h3>Find a meeting time</h3>
      <p>Green columns show hours between 8am–6pm local time for everyone</p>
    </div>

    <div class="zone-list" id="zoneList">
      <div class="zone-row" data-offset="-7">
        <span class="zone-name">San Francisco</span>
        <span class="zone-offset">UTC−7</span>
      </div>
      <div class="zone-row" data-offset="-4">
        <span class="zone-name">New York</span>
        <span class="zone-offset">UTC−4</span>
      </div>
      <div class="zone-row" data-offset="1">
        <span class="zone-name">London</span>
        <span class="zone-offset">UTC+1</span>
      </div>
      <div class="zone-row" data-offset="5.5">
        <span class="zone-name">Mumbai</span>
        <span class="zone-offset">UTC+5:30</span>
      </div>
    </div>

    <div class="grid-wrap">
      <div class="hour-grid" id="hourGrid"></div>
    </div>

    <div class="overlap-summary" id="overlapSummary" role="status" aria-live="polite"></div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }

.overlap-card { width: 480px; max-width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.overlap-head h3 { font-size: 14.5px; font-weight: 800; color: #111827; margin-bottom: 3px; }
.overlap-head p { font-size: 11px; color: #94a3b8; }

.zone-list { display: flex; flex-direction: column; gap: 6px; }
.zone-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; padding: 2px 2px; }
.zone-name { font-weight: 700; color: #334155; }
.zone-offset { font-weight: 600; color: #94a3b8; font-variant-numeric: tabular-nums; }

.grid-wrap { overflow-x: auto; }
.hour-grid { display: grid; grid-template-columns: repeat(24, 1fr); grid-auto-rows: 22px; gap: 2px; min-width: 480px; }

.hour-cell { border-radius: 3px; background: #f1f5f9; position: relative; }
.hour-cell.in-window { background: #bbf7d0; }
.hour-cell.overlap { background: #22c55e; }
.hour-cell.now { box-shadow: inset 0 0 0 2px #6366f1; }

.overlap-summary { font-size: 12.5px; font-weight: 700; color: #15803d; background: #f0fdf4; border-radius: 10px; padding: 10px 14px; }
.overlap-summary.none { color: #b91c1c; background: #fef2f2; }

const zoneList = document.getElementById('zoneList');
const hourGrid = document.getElementById('hourGrid');
const summaryEl = document.getElementById('overlapSummary');

const zones = Array.from(zoneList.querySelectorAll('.zone-row')).map((row) => ({
  name: row.querySelector('.zone-name').textContent,
  offset: parseFloat(row.dataset.offset),
}));

const WORK_START = 8; // 8am local
const WORK_END = 18; // 6pm local

// For a given UTC hour (0-23) and a zone's offset, what is that zone's local hour?
function localHour(utcHour, offset) {
  let h = (utcHour + offset) % 24;
  if (h < 0) h += 24;
  return h;
}

function isWithinWorkHours(localH) {
  return localH >= WORK_START && localH < WORK_END;
}

function buildGrid() {
  hourGrid.innerHTML = '';
  const overlapHours = [];

  for (let utcHour = 0; utcHour < 24; utcHour++) {
    const inWindowForAll = zones.every((z) => isWithinWorkHours(localHour(utcHour, z.offset)));
    if (inWindowForAll) overlapHours.push(utcHour);
  }

  // One row per zone, 24 cells each, colored by whether that specific UTC hour
  // falls in that zone's working window AND whether it's a shared overlap hour.
  zones.forEach((zone) => {
    for (let utcHour = 0; utcHour < 24; utcHour++) {
      const cell = document.createElement('div');
      const localH = localHour(utcHour, zone.offset);
      const inWindow = isWithinWorkHours(localH);
      const isOverlap = overlapHours.includes(utcHour);

      cell.className = 'hour-cell' + (isOverlap ? ' overlap' : inWindow ? ' in-window' : '');
      cell.title = `${zone.name}: ${formatHour(localH)} local (UTC hour ${utcHour})`;
      hourGrid.appendChild(cell);
    }
  });

  renderSummary(overlapHours);
}

function formatHour(h) {
  const period = h < 12 ? 'AM' : 'PM';
  let display = h % 12;
  if (display === 0) display = 12;
  return `${display}:00 ${period}`;
}

function formatRange(hours) {
  // Group consecutive UTC hours into contiguous ranges for readable output.
  const ranges = [];
  let start = hours[0];
  let prev = hours[0];

  for (let i = 1; i <= hours.length; i++) {
    if (hours[i] !== prev + 1) {
      ranges.push([start, prev]);
      start = hours[i];
    }
    prev = hours[i];
  }
  return ranges;
}

function renderSummary(overlapHours) {
  if (overlapHours.length === 0) {
    summaryEl.textContent = 'No shared 8am–6pm window across all these time zones.';
    summaryEl.classList.add('none');
    return;
  }

  summaryEl.classList.remove('none');
  const ranges = formatRange(overlapHours);
  const zoneTimes = zones.map((z) => {
    const localStart = formatHour(localHour(ranges[0][0], z.offset));
    return `${z.name} ${localStart}`;
  }).join(' · ');

  const hourCount = overlapHours.length;
  summaryEl.textContent = `${hourCount} shared hour${hourCount === 1 ? '' : 's'} available — starting at ${zoneTimes}`;
}

buildGrid();