Multiple time zones

"use client";

import { useState } from "react";
import { Kloq, KloqNav, KloqToolbar, localZone, useIsClient, zoneCityLabel, zoneOffsetLabel } from "kloq";
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "@/components/ui/select";
import { DISPLAY_ZONES, GUTTER_ZONES, teamEvents } from "./data";

export default function MultiTimezoneExample() {
  const [events] = useState(() => teamEvents(new Date()));
  const [zone, setZone] = useState("Europe/London");
  const [columns, setColumns] = useState(GUTTER_ZONES);
  const [pickerOpen, setPickerOpen] = useState(false);
  const isClient = useIsClient();

  const displayTimeZone = zone === "local" ? undefined : zone;
  // the browser's zone is only knowable on the client; the readout waits for it
  const resolvedZone = isClient ? (displayTimeZone ?? localZone()) : null;

  const toggleColumn = (id: string, on: boolean) =>
    setColumns(GUTTER_ZONES.filter((z) => (z === id ? on : columns.includes(z))));

  return (
    <div className="flex h-[30rem] flex-col">
      <div className="flex flex-wrap items-center gap-x-6 gap-y-2 border-b px-4 py-2.5">
        <label className="flex items-center gap-2">
          <span className="font-mono text-xs text-muted-foreground">display zone</span>
          <Select
            items={DISPLAY_ZONES}
            value={zone}
            onValueChange={(v) => setZone(v ?? "local")}
            open={pickerOpen}
            onOpenChange={setPickerOpen}
          >
            <SelectTrigger size="sm" className="w-32 min-w-0">
              <SelectValue />
            </SelectTrigger>
            <SelectPopup>
              {DISPLAY_ZONES.map((z) => (
                <SelectItem key={z.value} value={z.value}>
                  {z.label}
                </SelectItem>
              ))}
            </SelectPopup>
          </Select>
        </label>

        <div className="flex items-center gap-3">
          <span className="font-mono text-xs text-muted-foreground">gutter</span>
          {GUTTER_ZONES.map((id) => (
            <label key={id} className="flex items-center gap-1.5 text-sm">
              <Checkbox checked={columns.includes(id)} onCheckedChange={(on) => toggleColumn(id, on)} />
              {zoneCityLabel(id)}
            </label>
          ))}
        </div>
      </div>

      <div className="min-h-0 flex-1">
        <Kloq
          displayTimeZone={displayTimeZone}
          timeZones={columns.filter((z) => z !== displayTimeZone)}
          onTimeZonesClick={() => setPickerOpen(true)}
          defaultEvents={events}
          defaultView={3}
          persistence={false}
          designMode={false}
          storage={false}
        >
          <KloqToolbar>
            <KloqNav />
            <span className="font-mono text-xs text-muted-foreground tabular-nums">
              {resolvedZone ? `${resolvedZone} · UTC${zoneOffsetLabel(new Date(), resolvedZone)}` : ""}
            </span>
          </KloqToolbar>
        </Kloq>
      </div>
    </div>
  );
}

import { instantAt, resolveView, zoneCityLabel, type CalEvent, type EventColor } from "kloq";

/** What the display-zone picker offers. `"local"` means "no `displayTimeZone`" — the browser's own zone. */
export const DISPLAY_ZONES = [
  { value: "local", label: "Local" },
  ...["Europe/London", "America/New_York", "Asia/Tokyo", "Australia/Sydney"].map((id) => ({
    value: id,
    label: zoneCityLabel(id),
  })),
];

/** The extra gutter columns, in the order they are drawn. */
export const GUTTER_ZONES = ["Europe/London", "America/New_York", "Asia/Tokyo"];

interface Meeting {
  title: string;
  /** the zone the time was agreed in; omit for the browser's own */
  timeZone?: string;
  /** days from today, minutes from that zone's midnight, length in minutes */
  day: number;
  at: number;
  minutes: number;
  color: EventColor;
}

const h = (hours: number, minutes = 0) => hours * 60 + minutes;

const MEETINGS: Meeting[] = [
  { title: "Tokyo standup", timeZone: "Asia/Tokyo", day: 0, at: h(9), minutes: 30, color: "rose" },
  { title: "Tokyo standup", timeZone: "Asia/Tokyo", day: 1, at: h(9), minutes: 30, color: "rose" },
  { title: "Tokyo standup", timeZone: "Asia/Tokyo", day: 2, at: h(9), minutes: 30, color: "rose" },
  { title: "Sydney retro", timeZone: "Australia/Sydney", day: 0, at: h(16), minutes: 45, color: "amber" },
  { title: "London design review", timeZone: "Europe/London", day: 0, at: h(10), minutes: 60, color: "violet" },
  { title: "NY release sync", timeZone: "America/New_York", day: 0, at: h(7, 30), minutes: 45, color: "blue" },
  { title: "London 1:1s", timeZone: "Europe/London", day: 1, at: h(9, 30), minutes: 90, color: "violet" },
  { title: "NY handoff", timeZone: "America/New_York", day: 1, at: h(8), minutes: 30, color: "blue" },
  { title: "Sydney planning", timeZone: "Australia/Sydney", day: 2, at: h(15), minutes: 60, color: "amber" },
  { title: "London design review", timeZone: "Europe/London", day: 2, at: h(11), minutes: 60, color: "violet" },
  { title: "Focus block", day: 2, at: h(14), minutes: 120, color: "emerald" },
];

/** Each meeting at its own wall-clock time, stored as an absolute instant. */
export function teamEvents(now: Date): CalEvent[] {
  const view = resolveView(3, 1, now);
  return MEETINGS.map((m, i) => ({
    id: `team-${i}`,
    title: m.title,
    color: m.color,
    timeZone: m.timeZone,
    start: instantAt(view, m.day, m.at, m.timeZone),
    end: instantAt(view, m.day, m.at + m.minutes, m.timeZone),
  }));
}