Calendar

Install

pnpm dlx shadcn@latest add @namche/calendar

Usage

import { Calendar } from '@/components/ui/calendar';

const [date, setDate] = useState<Date | undefined>();

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  disabled={{ before: new Date() }}
/>

Calendar forwards every react-day-picker prop, so mode (single | multiple | range), selected, onSelect, and disabled behave exactly as documented there. It defaults captionLayout to "label" and buttonVariant to "ghost", and pre-styles classNames for the whole grid — pass a classNames override to replace individual pieces, or buttonVariant to change the nav/day button styling. Pair it with Popover and Button for an inline "schedule maintenance window" trigger, as in the preview above, rather than rendering it permanently on the page.