Month grid where each day prints colored dots beneath the number to hint at event categories on it.
The import and the props worth knowing about, in one place.
import { Calendar16 } from "@/components/beste/piece/calendar16";
<Calendar16
month="April"
year="2026"
firstDayOffset={3}
daysInMonth={30}
today={23}
eventsByDay={{
"3": [
"work"
],
"8": [
"work",
"personal"
],
"14": [
"health"
],
"20": [
"work",
"work",
"health"
],
"23": [
"work",
"personal",
"health"
],
"28": [
"personal"
]
}}
/>Month header above a 7-column grid of day numbers. Today pops with foreground, highlights tint sky.
Compact month grid with weekday abbreviations and a filled primary tile marking today.
Compact month summary pill with today tile on the left, a dotted event indicator, and a plus button.