World-clock card listing city and zone next to the local time, with an emerald Local pill on your row.
The import and the props worth knowing about, in one place.
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.