A month grid with selectable days, a today marker, colored event dots per day, and prev/next month controls. Data-driven (weekStart + daysInMonth) so it renders deterministically; controlled or self-managed selection.
The import and the props worth knowing about, in one place.
import { CalendarMonth } from "@/components/beste/component/calendar-month";
<CalendarMonth
monthLabel="January 2026"
weekStart={4}
daysInMonth={31}
today={20}
defaultSelectedDay={21}
events={[
{ day: 12, tone: "emerald" },
{ day: 22, tone: "primary" },
]}
onSelectDay={(day) => console.log("day:", day)}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
monthLabel* | string | — | Header label, e.g. "January 2026" |
weekStart* | number | — | Weekday index (0=Sun … 6=Sat) that the 1st falls on |
daysInMonth* | number | — | |
events | CalendarEvent[] | — | Colored dots under specific days |
today | number | — | Day number to mark as today |
selectedDay | number | — | Controlled selected day |
defaultSelectedDay | number | — | |
onSelectDay | (day: number) => void | — | |
onPrevMonth | () => void | — | |
onNextMonth | () => void | — | |
className | string | — |
Atrium Loft
Floor 3 · 12 seats
Studio B
Floor 2 · 8 seats
Garden Room
Ground · 20 seats
Rooftop Deck
Level 5 · 40 seats
| Actions | ||||||
|---|---|---|---|---|---|---|
A Amara Okafor[email protected] | Scale | Active | $4,820 | Jan 4, 2026 | ||
D Diego Santos[email protected] | Starter | Trial | $0 | Feb 18, 2026 | ||
P Priya Nair[email protected] | Growth | Active | $2,140 | Nov 22, 2025 | ||
T Tom Fischer[email protected] | Starter | Churned | $380 | Aug 9, 2025 | ||
L Lena Björk[email protected] | Scale | Active | $6,390 | Mar 2, 2026 | ||
M Marcus Reed[email protected] | Starter | Trial | $0 | Feb 27, 2026 |
8 row(s)