Day-over-hour heatmap with rose busy cells against muted free slots and a simple busy/free legend.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Calendar13 } from "@/components/beste/piece/calendar13";
<Calendar13
heading="Availability · Thu 23 Apr"
hours={[
"09",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17"
]}
days={[
"Mon",
"Tue",
"Wed",
"Thu",
"Fri"
]}
busy={[
{
"day": 0,
"hour": 1,
"span": 2
},
{
"day": 1,
"hour": 4,
"span": 1
},
{
"day": 2,
"hour": 0,
"span": 2
},
{
"day": 3,
"hour": 3,
"span": 3
},
{
"day": 4,
"hour": 6,
"span": 2
}
]}
tone="primary"
/>