OOO strip where days tint amber for half-days and rose with strikethrough for full out-of-office days.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
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"
/>