Time-blocked day plan with a start-time gutter and color-coded focus, meeting, break, and admin blocks.
The import and the props worth knowing about, in one place.
import { Calendar19 } from "@/components/beste/piece/calendar19";
<Calendar19
surface="card"
bordered={false}
inverted={false}
date="Mon · Apr 27"
blocks={[
{
"start": "09:00",
"label": "API refactor",
"tone": "focus"
},
{
"start": "10:30",
"label": "Standup",
"tone": "meeting"
},
{
"start": "12:00",
"label": "Lunch",
"tone": "break"
},
{
"start": "14:30",
"label": "Email & admin",
"tone": "admin"
}
]}
/>