Calendar

The calendar is a month grid for picking one date, a range, or several dates. Use it inline, or build it into your own popover; for a ready-made field, use DatePicker or DateRangePicker.

It wraps React DayPicker and passes all of its props through. On top of DayPicker, the caption opens a month and year picker, a range previews while you pick its end, a single selection slides between days, and month changes animate in the direction you travel.

Preview#

"use client";
 
import { useState } from "react";
import { Calendar } from "@/components/ui/cubby-ui/calendar/calendar";
 
export default function CalendarBasic() {

Installation#

npxnpx shadcn@latest add @cubby-ui/calendar

Usage#

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

<Calendar />

Examples#

Use mode to set what a click selects.

Single Date Selection#

Use mode="single" to pick one date. Screen readers announce the footer when it changes.

"use client";
 
import { useState } from "react";
import { Calendar } from "@/components/ui/cubby-ui/calendar/calendar";
 
export default function CalendarSingleDateSelection() {

Date Range Selection#

Use mode="range" to pick a start and end date. After the first click, the band follows the pointer or keyboard focus until you pick the end, then draws in from the start. Clicking after a complete range starts a new one.

"use client";
 
import { useState } from "react";
import type { DateRange } from "react-day-picker";
import { Calendar } from "@/components/ui/cubby-ui/calendar/calendar";
 

Multiple Dates Selection#

Use mode="multiple" to pick several individual dates.

"use client";
 
import { useState } from "react";
import { Calendar } from "@/components/ui/cubby-ui/calendar/calendar";
 
export default function CalendarMultipleDatesSelection() {

Month and Year#

Click the caption to jump to a far-off month, such as a birthday decades back. The picker covers the days with a scrolling year column beside that year's months. Picking a year changes the months shown; picking a month navigates there and closes the picker. Click the caption again or press Escape to close it without a change. startMonth and endMonth bound the picker as well as the arrows.

"use client";
 
import { useState } from "react";
import { Calendar } from "@/components/ui/cubby-ui/calendar/calendar";
 
export default function CalendarMonthAndYear() {

Disabled Dates#

Use disabled to block dates. It takes any DayPicker matcher: a date, an array, a { before } or { after } bound, a { dayOfWeek } list, or a function. Disabled days are struck through.

"use client";
 
import { useState } from "react";
import { Calendar } from "@/components/ui/cubby-ui/calendar/calendar";
 
export default function CalendarDisabledDates() {

With Footer#

Use footer to render content below the grid.

"use client";
 
import { useState } from "react";
import { Calendar } from "@/components/ui/cubby-ui/calendar/calendar";
 
export default function CalendarWithFooter() {

Accessibility#

The grid follows DayPicker's keyboard model: arrow keys move between days, PageUp and PageDown change months (add Shift for years), Home and End jump to the start or end of the week, and Enter or Space selects.

The caption is a toggle (aria-expanded) for the month and year picker. Opening it moves focus to the current month; Shift+Tab reaches the year column, where the arrow keys, PageUp/PageDown (ten years), Home, and End change the year as they move. In the months, arrow keys move between cells and PageUp/PageDown change the year. Escape closes the picker and returns focus to the caption without closing a surrounding popover; picking a month moves focus back to the days.

Today is marked with a dot as well as a heavier weight, and disabled days are struck through, so neither relies on color alone. Under prefers-reduced-motion, the transitions become plain crossfades.

API Reference#

Calendar wraps react-day-picker's DayPicker and passes every DayPicker prop through. This section covers the key props and the defaults this implementation changes.

For the complete API, see the react-day-picker documentation.

Props#

Calendar#

Month grid for selecting dates.

CalendarPresets#

A rail of one-click shortcuts beside a calendar. It stacks vertically from the sm breakpoint up; below it, it becomes a scrolling row that fades at whichever end has more to scroll. It renders a scroll area around a div with role="group": className goes on the scroll area, and other props such as aria-label go on the group.

CalendarPreset#

One shortcut button inside CalendarPresets.

Styling#

Each day cell exposes its state as data attributes you can target in style overrides.

The range band colors come from --calendar-band and --calendar-band-preview, set on [data-slot="calendar"] in calendar.css.