A meeting across zones

One moment, read in six cities. The meeting is set where you are, and in() shows it everywhere else.

Try this

Set the time to 23:00. Tokyo and Kolkata move to the next day, and say so.
Pick another zone in the preview’s bar. The meeting is now set there, and every row follows.
Add 'Australia/Sydney' to CITIES in cities.js. The preview rebuilds with a seventh row.

import { tomorrow } from 'native-dates';

import { CITIES } from './cities.js';

const input = document.querySelector('input');
const summary = document.querySelector('#summary');
const list = document.querySelector('ul');

function render() {
  // tomorrow, at the time typed, where this app is running
  const meeting = tomorrow().at(input.value);
  summary.textContent = meeting.format('full');

  list.innerHTML = CITIES.map((zone) => {
    const there = meeting.in(zone);
    const sameDay = there.date.equals(meeting.date);
    return `<li>
      <code>${zone}</code>
      <b>${there.format('time')}</b>
      <span class="muted">${sameDay ? '' : there.format({ weekday: 'long' })}</span>
    </li>`;
  }).join('');
}

input.addEventListener('input', render);
render();

Zone

Starting…

How it works

tomorrow().at(time) is the meeting: a calendar date, given a time of day, in the zone the app runs in. That one value is the whole model. Each row calls in() on it to read the same moment somewhere else, and format('time') prints it the way that row’s reader expects.

No offsets are stored and none are computed here. The zone names are the only data, and the platform knows what each one’s clock says tomorrow.