Out Of Office

OOO strip where days tint amber for half-days and rose with strikethrough for full out-of-office days.

Out of office · Apr 30 – May 1

Mon27

Tue28

Wed29

Thu30

Fri1

Sat2

Sun3

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

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"
/>