Day-over-hour heatmap with rose busy cells against muted free slots and a simple busy/free legend.
New here? Read the installation guide.
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"
/>GitHub-style contribution grid with five emerald intensity steps, a caption, and a Less/More legend.
Two-column grid of preset meeting templates, each showing the label and its intended time slot.
Month-long sky-shaded heatmap that darkens with meeting load, paired with a quiet-to-packed legend.
Compact upcoming-events list with warm gradient day-card tiles on the left and truncated titles.