Shadcn Calendar Components

Shadcn Calendar Component

The Shadcn Calendar is a month grid that lets users pick a single date, several dates or a date range. It is the core of every React date picker, booking form and report filter, and a good calendar saves users from typing dates by hand and getting the format wrong.

Range presets for analytics filters, a pricing calendar with a price under each day and month and year dropdowns are some of the layouts collected here. Every shadcn calendar on the page runs on React DayPicker, which handles date logic, localization and keyboard navigation, while shadcn/ui, React and Tailwind CSS provide the markup and classes you can change. Variants that add popovers, selects or scroll areas work with both Radix UI and Base UI setups.

What is the Shadcn Calendar Component?

The shadcn/ui Calendar is a styled wrapper around the DayPicker component from react-day-picker. It passes every DayPicker prop through, so selection modes, disabled dates, multiple months, dropdown captions, locales and custom day components all work as described in the DayPicker documentation. What shadcn/ui adds is a set of Tailwind classes for each part of the grid and ghost buttons for navigation, so it matches the rest of your interface.

Use the calendar inline when picking a date is the main task on the screen, such as a booking page. In a form, put it inside a Popover opened by a button to build a compact date picker. When users already know the date and just need to type it, a plain Input is faster, and for picking a year or month from a long list, a Select is often clearer than paging through months.

Anatomy of the Shadcn Calendar

15 Shadcn Calendar Variants

Each calendar variant listed here is previewed live at the top of this page, together with its source code and install command.

• Single, multiple and range: The three selection modes: one date, any number of separate dates, and a start and end date shown as a range.
• Disabled dates: Blocks past dates, weekends and specific ranges, and uses excludeDisabled so a range cannot span a blocked day.
• Two months: Shows two months side by side with paged navigation for choosing longer ranges such as trips.
• Custom styled range: Rounded start and end days with a tinted middle, styled entirely through the classNames prop.
• Month and year navigation: Month and year dropdowns rendered with Select, a year view with collapsible years, and a Today button that jumps back.
• Prices and time: A pricing calendar that shows a price under each day, a date with a time input, and a booking layout with time slots.
• Range presets: A sidebar with Today, Last 7 days, Month to date, Last year and more, for analytics and report filters.
• Date pickers: A button that opens the calendar in a popover and shows the formatted date or date range once selected.

How to Install the Shadcn Calendar Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a calendar variant by its name:

npx shadcn@latest add @shadcnuikit/calendar1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Calendar Component

Import Calendar, keep the selected value in state and pass it through selected and onSelect. The type of the value depends on the mode: a Date, an array of dates, or a DateRange.

"use client"

import { useState } from "react"
import { type DateRange } from "react-day-picker"

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

export function BookingCalendar() {
  const [range, setRange] = useState<DateRange | undefined>()

  return (
    <Calendar
      mode="range"
      numberOfMonths={2}
      selected={range}
      onSelect={setRange}
      disabled={{ before: new Date() }}
      className="rounded-lg border"
    />
  )
}

Why Use the Shadcn Calendar Component

• Reliable date logic: React DayPicker handles weeks, month lengths, leap years and outside days, so you do not write date math for the grid.
• Three selection modes: Single, multiple and range selection share one component and one API.
• Flexible disabled rules: Disable dates with before, after, ranges, days of the week or a function, and combine several rules in an array.
• Localization: Import a locale from react-day-picker/locale (the date-fns locale objects) and pass it to locale to translate month and day names and set the first day of the week.
• Custom day content: Swap the day button, caption or dropdowns through the components prop for prices, events or custom navigation.

Common Calendar Use Cases

• Booking and reservations: Hotel stays, appointments and rentals with blocked dates and time slots next to the grid.
• Date pickers in forms: Birth dates, due dates and delivery dates in a popover that keeps the form compact.
• Analytics filters: Date ranges with presets such as Last 7 days or Month to date on dashboards and reports.
• Travel and pricing: Flight and hotel calendars that show the price or availability under each day.
• Scheduling: Picking several separate days for shifts, classes or recurring events with multiple mode.

Customizing the Shadcn Calendar

Each part of the grid has a key in the classNames prop, such as day, today, range_start, range_middle and range_end, so you can restyle one part without touching the rest. The cell size is a CSS variable, --cell-size, which you can change with a single class to make the whole calendar larger. Colors come from your theme, and you can generate a palette with the free Theme Generator.

For example, this makes the days larger and shows month and year dropdowns instead of a plain caption:

<Calendar
  mode="single"
  captionLayout="dropdown"
  startMonth={new Date(1990, 0)}
  endMonth={new Date(2030, 11)}
  className="rounded-lg border [--cell-size:--spacing(10)]"
/>

Calendar Accessibility and Keyboard Support

React DayPicker renders the month as a grid with proper roles, labels every day button with its full date, and marks selected and disabled days with ARIA attributes. Focus moves between days with the arrow keys, so keyboard users can pick a date without a mouse. Only one day in the grid is in the tab order at a time, which keeps Tab moving quickly to the next control.

When you place the calendar in a popover, give the trigger button a visible label and show the selected date as text on the button, as the date picker variants on this page do.

Calendar Best Practices

• Disable dates users cannot pick, such as past days for bookings, instead of showing an error after they pick them.
• Use excludeDisabled in range mode when a range must not include blocked days.
• Show two months for ranges that often cross a month boundary, like hotel stays.
• Always show the selected date as text next to or inside the trigger, not only as a highlighted day.
• Add a dropdown or year view when users need dates far in the past, such as a birth date.
• Pass a locale that matches your users so the week starts on the right day.

Components Related to Calendar

Shadcn Calendar FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.