Calendar

An accessible month calendar for selecting dates.

Overview

Calendar wraps react-day-picker with Vinyaas styling. It owns the month grid, keyboard navigation, and caption controls. Pair it with Date Picker when you need a compact trigger and popover.

Install adds react-day-picker and date-fns as dependencies.

Preview

October 2026

Customize

Mode
Caption Layout
Months
1
Show Outside Days
Show Week Number
Fixed Weeks
Disable Past Dates

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add calendar

Usage

import { useState } from "react";

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

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

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md border"
    />
  );
}

Examples

Basic

Single-date selection with controlled state.

October 2026

Selected date

Open the grid on a month that includes the current value.

October 2026

Selected Thu, October 15, 2026

Disabled dates

Matchers prevent choosing past days.

October 2026

Month navigation

Previous/next buttons and native month/year selects. Set defaultMonth for a fixed starting view.

March 2026

Use the previous/next buttons or the month and year selects to move between months. Pass defaultMonth to open on a specific month.

Multiple dates

Toggle individual dates on and off. Each click adds or removes a day.

October 2026

No dates selected

Date range

Pick a start and end date with in-range highlighting.

March 2026

3/10/2026 – 3/16/2026

In practice

Embed Calendar in a scheduling form. Disable weekends or blackout dates with matchers.

October 2026

Weekends are unavailable for this room.

API

Other attributes for the underlying element are passed through.

NameTypeDefaultDescription
mode"single" | "multiple" | "range"—Selection mode forwarded to DayPicker. Use single for one date or range for a start and end.
selectedDate | Date[] | DateRange—The selected date, dates, or range for the active mode.
onSelect(date) => void—Called when the user selects or clears a date or range.
disabledMatcher | Matcher[]—Dates or rules that cannot be selected (for example before today).
defaultMonthDate—Month shown on first render when no month is selected.
showOutsideDaysbooleantrueWhether days from adjacent months appear in the grid.
className / classNamesstring / object—Extra classes on the root or individual DayPicker parts.

Accessibility

DayPicker renders a semantic grid with labeled navigation buttons. Arrow keys move focus between days; Enter and Space select the focused day.

Disabled days are omitted from selection and exposed as unavailable in the grid. When Calendar sits inside a form, associate it with Label via id on the root or describe the chosen date in nearby helper text.