Mini Month Grid

Month header above a 7-column grid of day numbers. Today pops with foreground, highlights tint sky.

April2026
123456789101112131415161718192021222324252627282930

New here? Read the installation guide.

Import & use
import { Calendar2 } from "@/components/beste/piece/calendar2";

<Calendar2
  month="April"
  year={2026}
  startWeekday={2}
  daysInMonth={30}
  today={21}
  highlights={[
    7,
    14,
    28
  ]}
  weekdays={[
    "M",
    "T",
    "W",
    "T",
    "F",
    "S",
    "S"
  ]}
/>

More Calendar pieces

View all Calendar
April 2026
MTWTFSS

Mini Month

Compact month grid with weekday abbreviations and a filled primary tile marking today.

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

Event Dots Month

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

APR
21Tuesday

Calendar Day

Colored month strip on top, a giant day number, and the weekday below.

12May· Monday

Month Pill

Compact month summary pill with today tile on the left, a dotted event indicator, and a plus button.

June 20266 nights
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

Range Picker

Month grid with a tinted range band, solid start and end chips, and a nights chip in the header.

Quick create

Quick Create

Two-column grid of preset meeting templates, each showing the label and its intended time slot.

Markdown version