Meeting planner

Several cities on one time line, one row per city, with each hour drawn as a block of dots: dense for working hours, sparse for the night.

View as Markdown

<GeoTimezones />· loading

Trydrag the cursor into the lit band, then add Singapore.

Installation

pnpm dlx shadcn@latest add @lumesec/geo-timezones

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/geo-timezones.json

Usage

geo-timezones-example.tsx

"use client";

import * as React from "react";

import { GeoTimezones, type TimeZoneCity } from "@/components/lumesec/geo-timezones";

const team: TimeZoneCity[] = [
  { id: "lon", label: "London", timeZone: "Europe/London" },
  { id: "nyc", label: "New York", timeZone: "America/New_York" },
  { id: "blr", label: "Bengaluru", timeZone: "Asia/Kolkata" },
];

export function Example() {
  const [meeting, setMeeting] = React.useState<Date | null>(null);
  return (
    <div className="grid gap-2">
      <GeoTimezones defaultCities={team} reference="lon" onValueChange={(time) => setMeeting(new Date(time))} />
      <p className="text-sm text-muted-foreground">{meeting ? meeting.toISOString() : "Drag the cursor to pick a time."}</p>
    </div>
  );
}

Several cities on one time line, one row per city, with each hour drawn as a block of dots: dense for working hours, sparse for the night. Drag the cursor across the rows and every city's local time rolls with it.

Hours when every city is at work light up as a band across all rows, and a light runs down the band when the cursor enters it. Offsets come from the time zone database, so daylight saving time is handled.