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
A Gantt-style day timeline: resource rows against an hour axis with time-positioned event bars (left/width computed from start/end), grid lines, a live 'now' marker, colored tones, and clickable bars with a hover tooltip showing the event and its time range. Ideal for room bookings, shifts, and resource scheduling.
| Actions | ||||||
|---|---|---|---|---|---|---|
A Amara Okaforamara@northwind.io | Scale | Active | $4,820 | Jan 4, 2026 | ||
D Diego Santosdiego@lumen.app | Starter | Trial | $0 | Feb 18, 2026 | ||
P Priya Nairpriya@vertex.co | Growth | Active | $2,140 | Nov 22, 2025 | ||
T Tom Fischertom@basecamp.dev | Starter | Churned | $380 | Aug 9, 2025 | ||
L Lena Björklena@aurora.se | Scale | Active | $6,390 | Mar 2, 2026 | ||
M Marcus Reedmarcus@hexa.io | Starter | Trial | $0 | Feb 27, 2026 |
8 row(s)
Client-side data-table engine: column-driven config with custom cell renderers, sortable headers, keyword search, row selection, per-row action menus, and pagination. Owns all state; blocks pass columns + rows as data.
Topbar bell trigger with an unread count and a popover feed: icon rows with title, description, timestamp, unread dots, a mark-all-read action, and a scrollable list. Manages read state internally.
Dashboard sidebar with a brand header, grouped nav items, Lucide icons, trailing count badges, and an active state. Collapse is driven from the shell topbar via the `collapsed` prop (icon rail when true).