OOO strip where days tint amber for half-days and rose with strikethrough for full out-of-office days.
New here? Read the installation guide.
import { Calendar24 } from "@/components/beste/piece/calendar24";
<Calendar24
days={[
{
"day": "Mon",
"date": 27
},
{
"day": "Tue",
"date": 28
},
{
"day": "Wed",
"date": 29,
"blocked": true
},
{
"day": "Thu",
"date": 30,
"off": true
},
{
"day": "Fri",
"date": 1,
"off": true
},
{
"day": "Sat",
"date": 2
},
{
"day": "Sun",
"date": 3
}
]}
reason="Out of office · Apr 30 – May 1"
/>Pick a day
May6 slots open on Wednesday, from 08:00 to 16:30.
A one-week day picker with seven compact cells, an accent-filled selection, muted fully booked days, and a caption for the chosen day.
Seven-day strip of bordered day tiles, each showing the weekday, number, and a dot row of event counts.
Today's schedule card with left-ruled event rows colored by accent and a leading start-time column.