Meeting Density

Month-long sky-shaded heatmap that darkens with meeting load, paired with a quiet-to-packed legend.

This week · meetings
3Mon
5Tue
4Wed
7Thu
4Fri

New here? Read the installation guide.

Import & use
import { Calendar27 } from "@/components/beste/piece/calendar27";

<Calendar27
  label="This week · meetings"
  days={[
    {
      "label": "Mon",
      "count": 3
    },
    {
      "label": "Tue",
      "count": 5
    },
    {
      "label": "Wed",
      "count": 4
    },
    {
      "label": "Thu",
      "count": 7
    },
    {
      "label": "Fri",
      "count": 4
    }
  ]}
  max={8}
/>

More Calendar pieces

View all Calendar
Availability · Thu 23 Apr
091011121314151617MonTueWedThuFri
BusyFree

Availability Grid

Day-over-hour heatmap with rose busy cells against muted free slots and a simple busy/free legend.

Commit activity
342 commits in the last year

Year Heatmap

GitHub-style contribution grid with five emerald intensity steps, a caption, and a Less/More legend.

Release planning · Q3In 3 min · 30 minutes
BSKOAKJPNA

Meeting Start

Imminent meeting banner with a sky Join button and stacked attendee avatars ringed by RSVP status.

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.

April2026
123456789101112131415161718192021222324252627282930

Mini Month Grid

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

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.

Markdown version