Calendar

Install

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/calendar.json

Usage

Built on react-day-picker, styled with Plinth tokens; all its props pass through.

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

<Calendar mode="single" selected={date} onSelect={setDate} />

<Calendar
  mode="range"
  selected={range}
  onSelect={setRange}
  numberOfMonths={2}
/>

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

For an input-style trigger, use Date Picker, which wraps this calendar in a popover.

Accessibility

• react-day-picker provides grid semantics and full keyboard navigation (arrows move, PageUp/Down change month, Home/End jump within the week).
• Today is marked with an accent, selected days with the primary fill; both also carry proper aria state.