Calendar

Calendar lets users choose one date, several dates, or a continuous date range. It builds on React DayPicker and applies the argv visual system to navigation and selection states.

Use it when users benefit from seeing dates in a monthly grid. For a known date that is faster to type, consider pairing or replacing it with a text input.

Installation

pnpm dlx shadcn@latest add http://ui.argv-tech.dev/r/calendar.json

Usage

"use client"

import { useState } from "react"
import { Calendar } from "@/components/ui/argv/calendar"

export function DatePicker() {
    const [date, setDate] = useState<Date>()

    return (
        <Calendar
            mode="single"
            selected={date}
            onSelect={setDate}
            aria-label="Choose a deployment date"
        />
    )
}

Selection Modes

Use mode="single", mode="multiple", or mode="range" to select the corresponding React DayPicker prop contract. The selected value and onSelect callback change to match the chosen mode.

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

Localization

Pass a date-fns locale through locale. Use DayPicker's formatters and labels props when the product requires custom visible strings or accessible names.

API Reference

Calendar

Calendar accepts React DayPicker props plus buttonVariant. This prop controls the previous and next month buttons and defaults to ghost.

showOutsideDays defaults to true, while captionLayout defaults to label. Replace internal parts through components, merge slot classes through classNames, and localize labels and formatting with locale and formatters.

CalendarDayButton

Calendar uses this wrapper internally for each date. It forwards React DayPicker DayButton props and normally does not need to be rendered directly.

Accessibility

Give a standalone calendar an accessible label that explains what date the user is choosing. If validation instructions exist, connect them to the surrounding field or form controls.

Disabled dates must remain visibly distinct. Selected ranges should communicate their start and end states with more than color alone.