Meeting-room chooser where each row shows capacity, video, and an emerald Free or rose Booked pill.
New here? Read the installation guide.
import { Calendar18 } from "@/components/beste/piece/calendar18";
<Calendar18
heading="Pick a room · Thu 14:00 – 14:30"
rooms={[
{
"name": "The Archive",
"floor": "Floor 2 · North",
"capacity": 8,
"availableFrom": "Free now",
"video": true,
"active": true
},
{
"name": "Orbit",
"floor": "Floor 3",
"capacity": 4,
"availableFrom": "Free from 14:15"
},
{
"name": "Boardroom",
"floor": "Floor 5 · Executive",
"capacity": 12,
"availableFrom": "Booked · next at 16:00",
"video": true
}
]}
/>Appointment picker with a timezone caption and a grid of time pills, one active and a few disabled.
Month grid with a tinted range band, solid start and end chips, and a nights chip in the header.
Meeting-booked card with an emerald check header, when/where/guests rows, and add to calendar plus reschedule.
Pick a day
May6 slots open on Wednesday, from 08:00 to 16:30.
A one-week day picker with seven compact cells, an accent-filled selection, muted fully booked days, and a caption for the chosen day.