Week Strip

Seven-day strip of bordered day tiles, each showing the weekday, number, and a dot row of event counts.

Apr 20 – Apr 26

Mon20

Tue21

Wed22

Thu23

Fri24

Sat25

Sun26

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

Import & use

import { Calendar6 } from "@/components/beste/piece/calendar6";

<Calendar6
  heading="Apr 20 – Apr 26"
  days={[
    {
      "weekday": "Mon",
      "day": 20,
      "events": 2
    },
    {
      "weekday": "Tue",
      "day": 21,
      "events": 1
    },
    {
      "weekday": "Wed",
      "day": 22
    },
    {
      "weekday": "Thu",
      "day": 23,
      "today": true,
      "events": 3
    },
    {
      "weekday": "Fri",
      "day": 24,
      "events": 1
    },
    {
      "weekday": "Sat",
      "day": 25
    },
    {
      "weekday": "Sun",
      "day": 26,
      "events": 2
    }
  ]}
/>