Calendar

The Calendar component provides an accessible, responsive date-selection interface powered by react-day-picker. It supports single-date selection, date range selection, disabled date rules, and custom month navigators styled with semantic design tokens.

pnpm add @quinkit/ui react-day-picker

react-day-picker is a required peer dependency for Calendar.

### Single Date Selection

import { useState } from "react";
import { Calendar } from "@quinkit/ui";

export function SingleCalendarDemo() {
  const [date, setDate] = useState<Date | undefined>(new Date());
  return <Calendar mode="single" selected={date} onSelect={setDate} />;
}

### Date Range Selection

import { useState } from "react";
import { Calendar, type DateRange } from "@quinkit/ui";

export function RangeCalendarDemo() {
  const [range, setRange] = useState<DateRange | undefined>();
  return <Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />;
}

• Full WAI-ARIA grid role semantics for screen readers.
• Focusable day buttons with visible focus rings.
• Accessible month navigation controls with aria-labels.

• Tab / Shift+Tab: Move focus into and out of the calendar grid.
• Arrow Keys: Navigate between day cells.
• Enter / Space: Select the focused date.