Day Planner

Time-blocked day plan with a start-time gutter and color-coded focus, meeting, break, and admin blocks.

Mon · Apr 27

09:00

Focus · API refactor

10:30

Standup

11:00

Focus · API refactor

12:00

Lunch

13:00

Design review

14:30

Email & admin

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

Import & use

import { Calendar19 } from "@/components/beste/piece/calendar19";

<Calendar19
  date="Mon · Apr 27"
  blocks={[
    {
      "start": "09:00",
      "label": "Focus · API refactor",
      "tone": "focus"
    },
    {
      "start": "10:30",
      "label": "Standup",
      "tone": "meeting"
    },
    {
      "start": "11:00",
      "label": "Focus · API refactor",
      "tone": "focus"
    },
    {
      "start": "12:00",
      "label": "Lunch",
      "tone": "break"
    },
    {
      "start": "13:00",
      "label": "Design review",
      "tone": "meeting"
    },
    {
      "start": "14:30",
      "label": "Email & admin",
      "tone": "admin"
    }
  ]}
/>