World-clock card listing city and zone next to the local time, with an emerald Local pill on your row.
New here? Read the installation guide.
import { Calendar17 } from "@/components/beste/piece/calendar17";
<Calendar17
heading="Meeting in multiple zones"
rows={[
{
"city": "Istanbul",
"zone": "Europe/Istanbul",
"time": "14:00",
"offset": "GMT+3",
"isLocal": true
},
{
"city": "London",
"zone": "Europe/London",
"time": "12:00",
"offset": "GMT+1"
},
{
"city": "San Francisco",
"zone": "America/Los_Angeles",
"time": "04:00",
"offset": "GMT-7"
},
{
"city": "Tokyo",
"zone": "Asia/Tokyo",
"time": "20:00",
"offset": "GMT+9"
}
]}
/>Appointment picker with a timezone caption and a grid of time pills, one active and a few disabled.
Today's schedule card with left-ruled event rows colored by accent and a leading start-time column.
Today
Tue, 12 MayA day view listing time-stamped agenda rows, each with a colored marker and a truncating title.
Sun-schedule card with sunrise and sunset mono times flanking a large daylight duration in the center.