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"
]
}}
bordered={false}
/>