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

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

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}
/>