Daily Agenda Card

A day view listing time-stamped agenda rows, each with a colored marker and a truncating title.

Today

Tue, 12 May

09:00New member intake

11:30Care plan review

14:00Billing sync

16:15Follow-up call

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

Import & use

import { Calendar31 } from "@/components/beste/piece/calendar31";

<Calendar31
  title="Today"
  dateLabel="Tue, 12 May"
  items={[
    {
      "time": "09:00",
      "title": "New member intake",
      "tone": "primary"
    },
    {
      "time": "11:30",
      "title": "Care plan review",
      "tone": "emerald"
    },
    {
      "time": "14:00",
      "title": "Billing sync",
      "tone": "amber"
    },
    {
      "time": "16:15",
      "title": "Follow-up call",
      "tone": "rose"
    }
  ]}
/>

More Calendar pieces

View all Calendar

Today · Thu 23 Apr

09:30

Design reviewFigma

11:00

1:1 with MiraMeet

14:30

Ship roomOffice · 4F

Day Agenda

calendar10

Today's schedule card with left-ruled event rows colored by accent and a leading start-time column.

APR

21Tuesday

Calendar Day

calendar1

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

Coming up

1May

Project Horizon launch

12May

Team offsite · Bodrum

19May

Product review

23May

Design + Eng sync

Upcoming Events

calendar22

Compact upcoming-events list with warm gradient day-card tiles on the left and truncated titles.

Weekly standup09:30 – 09:45

MTWTFSS

Ends Dec 19, 2026

Recurring Schedule

calendar9

Weekly recurrence card with a repeat icon, time window, highlighted day-of-week pills, and an end date.

Mon · Apr 27