Event Dots Month

Month grid where each day prints colored dots beneath the number to hint at event categories on it.

April 2026
MTWTFSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
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"
    ]
  }}
/>