Month grid with a tinted range band, solid start and end chips, and a nights chip in the header.
New here? Read the installation guide.
import { Calendar5 } from "@/components/beste/piece/calendar5";
<Calendar5
month="June"
year="2026"
rangeStart={12}
rangeEnd={18}
firstDayOffset={0}
daysInMonth={30}
weekdays={[
"M",
"T",
"W",
"T",
"F",
"S",
"S"
]}
nightsLabel="nights"
/>Month grid where each day prints colored dots beneath the number to hint at event categories on it.
Month header above a 7-column grid of day numbers. Today pops with foreground, highlights tint sky.
Appointment picker with a timezone caption and a grid of time pills, one active and a few disabled.
Meeting-room chooser where each row shows capacity, video, and an emerald Free or rose Booked pill.