Month grid with a tinted range band, solid start and end chips, and a nights chip in the header.
The import and the props worth knowing about, in one place.
import { Calendar5 } from "@/components/beste/piece/calendar5";
<Calendar5
surface="card"
bordered={true}
inverted={false}
month="June"
year="2026"
rangeStart={12}
rangeEnd={18}
firstDayOffset={0}
daysInMonth={30}
weekdays={[
"M",
"T",
"W",
"T",
"F",
"S",
"S"
]}
nightsLabel="nights"
/>Month header above a 7-column grid of day numbers. Today pops with foreground, highlights tint sky.
Month grid where each day prints colored dots beneath the number to hint at event categories on it.
Appointment picker with a timezone caption and a grid of time pills, one active and a few disabled.
Compact month grid with weekday abbreviations and a filled primary tile marking today.