Calendar

A fully styled calendar built on react-day-picker. Supports single date selection, date ranges, multiple selection, dropdown month/year navigation, and locale-aware formatting.

"use client"

import * as React from "react"
import { Calendar } from "@/components/ui/calendar"

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

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

Anatomy

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

<Calendar />

Examples

Single date selection

function Demo() {
  const [date, setDate] = React.useState<Date | undefined>()

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

Date range selection

function Demo() {
  const [range, setRange] = React.useState<DateRange | undefined>()

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

With dropdown navigation

Use captionLayout="dropdown" to show month and year dropdowns instead of a static label.

<Calendar
  mode="single"
  captionLayout="dropdown"
  fromYear={2000}
  toYear={2030}
/>

Custom button variant

Change the navigation button style with the buttonVariant prop.

<Calendar buttonVariant="outline" />

API Reference

Calendar

A wrapper around react-day-picker's DayPicker with pre-configured styles and components. Accepts all DayPicker props plus the additional props listed below.