Calendar

Single Selection

Range Selection

Multiple Selection

With Disabled Dates

Installation

npx visor add calendar

This copies two files into your project:

• components/ui/calendar/calendar.tsx — the component
• components/ui/calendar/calendar.module.css — the styles

Usage

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

export default function Example() {
  const [date, setDate] = useState<Date | undefined>(new Date());

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
    />
  );
}

API Reference

The Calendar component accepts all react-day-picker props including mode, selected, onSelect, disabled, fromDate, toDate, and more.

Accessibility

• Built on react-day-picker which renders a full ARIA grid calendar
• Navigation buttons include aria-label attributes ("Go to previous month", "Go to next month")
• Days communicate their state via aria-selected, aria-disabled, and aria-current="date" for today
• Full keyboard navigation: Arrow keys move focus between days, Enter/Space select, Page Up/Down navigate months
• Announce the current month/year via role="heading" on the caption