Day-over-hour grid with tone-colored busy cells against muted free slots.
The import and the props worth knowing about, in one place.
import { Calendar13 } from "@/components/beste/piece/calendar13";
<Calendar13
heading="Availability"
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"
bordered={false}
/>