Time-blocked day plan with a start-time gutter and color-coded focus, meeting, break, and admin blocks.
New here? Read the installation guide.
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"
}
]}
/>Today's schedule card with left-ruled event rows colored by accent and a leading start-time column.
Stacked block of scheduled slots with tone-colored left rails and a from-to mono time column.
Today
Tue, 12 MayA day view listing time-stamped agenda rows, each with a colored marker and a truncating title.
Horizontal pill combining a relative label, weekday, mono date, and an optional time separated by thin rules.