Question 1

What is a shadcn calendar?

Accepted Answer

A shadcn calendar is the standalone date-grid component you embed when users need to pick a date inline rather than open a date picker popover. It's built on react-day-picker (the de-facto React calendar primitive — handles multi-month, range selection, disabled dates, locales) wrapped by shadcn/ui's styled Calendar component, and styled with Tailwind CSS. Each example in this gallery is a single self-contained TSX file — copy, paste, and ship.

Question 2

Are these calendar examples free?

Accepted Answer

Yes. Every calendar example on shadcn.io is free to copy and use in personal or commercial projects. There's no gated source, no attribution requirement, and no runtime dependency on shadcn.io. Browse any example, view the code, run the installer, and move on.

Question 3

How is this different from DatePicker?

Accepted Answer

Calendar is the inline date grid — the visible month view that lives directly in the page (booking forms, settings panels, dashboard widgets). DatePicker wraps the same Calendar inside a Popover triggered by an Input — compact when collapsed, expands on focus. Pick Calendar when the date selection is the primary task on screen; pick DatePicker when it's one field among many.

Question 4

When should I use a Calendar versus a Combobox or a free-text date input?

Accepted Answer

Calendar wins for booking flows, scheduling, and any context where users browse availability visually (which days are open / blocked). Free-text date input wins for known dates where typing is faster than scrolling (date of birth, expiration date). Combobox / Select wins for relative ranges ("Last 7 days", "This month"). Calendar + free-text input is a common combo: type-to-jump, click-to-confirm.

Question 5

When should I put a calendar in a dialog?

Accepted Answer

Use the dialog variant for mobile-first UIs where the calendar would crowd the page, or for actions that demand a focus moment ("Pick a delivery date" with explicit Confirm/Cancel buttons). The dialog variant pairs Calendar with shadcn/ui Dialog, AlertDialog footer buttons, and an open/close state. For inline always-visible calendars (booking grids, recurring scheduler), use the standard variant.

Question 6

How do I support date-range selection?

Accepted Answer

Pass `mode="range"` to Calendar. The selected value becomes `{ from, to }` instead of a single Date. Render a small text summary of the selected range above the calendar ("Apr 14 — Apr 21, 7 nights"). For booking flows, also disable past dates via `disabled={{ before: new Date() }}` so users can't pick a checkout-out range that already passed.

Question 7

How do I disable specific dates (weekends, sold-out, blackout)?

Accepted Answer

Calendar's `disabled` prop accepts a Date, an array of Dates, a {from,to} range, or a function `(date) => boolean`. For weekends: `disabled={(date) => date.getDay() === 0 || date.getDay() === 6}`. For sold-out specific dates from your backend: pass an array. For complex availability rules, use the function form and combine multiple conditions inside it.

Question 8

How do I show multiple months side by side?

Accepted Answer

Pass `numberOfMonths={2}` (or 3) to render multiple month grids horizontally. Best for date-range selection (booking) where users want to span months without paging back and forth. On mobile, drop back to `numberOfMonths={1}` via a media query — two months don't fit and tap targets shrink. Also consider `pagedNavigation` for snapping the next/previous buttons to month-pair boundaries.

Question 9

How do I install a calendar example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading on any example's detail page. The shadcn CLI copies the example's TSX source into your project at `components/examples/calendar/…`, plus the shadcn/ui Calendar primitive (and its react-day-picker dependency) if you don't already have them. Wire the `selected` and `onSelect` props to your form state.

Question 10

How do I localize the calendar to non-English locales?

Accepted Answer

react-day-picker supports locales via the `locale` prop — pass a date-fns Locale (e.g. `import { fr } from "date-fns/locale"` then `locale={fr}`). Day names, month names, and the first day of the week (Sunday vs Monday) all adapt. For RTL locales (Arabic, Hebrew), also set the document `dir="rtl"` and the calendar mirror direction follows. For server-rendered calendars, pass the locale from the server based on the request's Accept-Language header.

Question 11

How do I theme the selected day color?

Accepted Answer

shadcn/ui's Calendar uses the primary CSS variable for selected days. Override `--primary` and `--primary-foreground` in your global.css to change the selected color globally. For a per-instance override, pass `classNames={{ day_selected: "bg-emerald-600 text-white hover:bg-emerald-700" }}` to the Calendar — shadcn forwards the classNames to react-day-picker's day cells.

Question 12

How do I show event indicators on specific dates?

Accepted Answer

Use react-day-picker's `modifiers` and `modifiersClassNames` props. Define a modifier like `events: [date1, date2, …]` and a className like `events: "after:absolute after:bottom-1 after:right-1 after:size-1 after:rounded-full after:bg-emerald-500"`. The pseudo-element renders a small dot on the day cell. For multi-event days, stack multiple modifiers with different colors.

Question 13

Which libraries do calendar examples depend on?

Accepted Answer

react-day-picker (the calendar primitive — handles month navigation, selection modes, locale, modifiers), shadcn/ui Calendar (the styled wrapper generated into your project by the CLI), Tailwind CSS (styling), and date-fns (locale + date arithmetic). Optionally Lucide React for chevrons. TypeScript is assumed. React 19 is the baseline. The dialog variant adds shadcn/ui Dialog — one more primitive away.

Question 14

Are calendar examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. react-day-picker implements the WAI-ARIA Date Picker pattern: arrow keys move between days, PageUp/PageDown moves between months, Home/End jumps to start/end of the week, Enter selects. Each day cell has a meaningful `aria-label` ("April 14, 2026, Monday") and selected state is announced. For multi-month layouts, focus trap stays within the calendar grid until tabbed out.

Question 15

Can I use these calendar examples with React Server Components?

Accepted Answer

The Calendar primitive is a client component because it manages selection state and date navigation. Wrap it inside a Server Component parent and pass server-fetched data (initial date, disabled date arrays, event modifiers) as props. For SSR-first booking flows where the available dates come from the backend, fetch on the server and feed the modifiers prop into a client-boundary Calendar.

Question 16

Do these examples work with Tailwind CSS v3 and v4?

Accepted Answer

Both. shadcn.io is authored on Tailwind v4, so the examples use the v4 class names and design tokens. If you're on Tailwind v3, the classes still apply — Tailwind v4 introduced opt-in features but kept the utility naming compatible. The day-cell hover and selected states use standard utility classes that exist identically across versions.

React Calendar Examples for shadcn/ui

Browse every calendar example

Frequently Asked Questions