Question 1

What is a shadcn calendar?

Accepted Answer

A month grid for picking dates, always visible on the page or in a dialog. shadcn.io's Calendar handles single days, ranges and multiple days, unavailable dates, several months side by side and keyboard navigation, styled with your theme's tokens.

Question 2

Are these calendar examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution. Seeing the code and installing it takes a free shadcn.io account.

Question 3

How is this different from the Date Picker?

Accepted Answer

The Calendar is the grid itself, shown where you place it. The Date Picker is a button that opens a calendar in a popup and closes it after a pick. Use the Calendar when picking a date is the main task of the page or the dialog.

Question 4

When should I use a calendar instead of a date input?

Accepted Answer

A calendar when people pick by looking: which weekday, what's free, how far away. A typed date input when they already know the date, such as a birth date, where the month and year dropdowns example also helps.

Question 5

When should I put a calendar in a dialog?

Accepted Answer

When choosing a date is one step of a flow and the page has no room for a month grid, such as rescheduling or filtering a report. Every example in this gallery comes inline and in a dialog, with the same calendar inside.

Question 6

How do I support date ranges?

Accepted Answer

Put the calendar in range mode: `selectionMode` on Ark UI and the Vue, Svelte and Solid ports, `mode` on Base UI and Radix UI, and `RangeCalendar` on React Aria. The value is then a start and an end. The range examples show two months side by side.

Question 7

How do I disable specific dates?

Accepted Answer

Return `true` for the day from `isDateUnavailable` on Ark UI, React Aria and the ports, or pass the dates, ranges or weekdays to `disabled` on Base UI and Radix UI. Blocked days are dimmed and can't be selected.

Question 8

How do I show several months?

Accepted Answer

Set the number of months: `numOfMonths` on Ark UI and the ports, `numberOfMonths` on the other libraries. The range examples show this month and the next.

Question 9

How do I install a calendar example?

Accepted Answer

Sign in with a free account and run the install command on the example's page. It adds the example's file, the Calendar and anything else it uses, such as Dialog, Select or Scroll Area.

Question 10

How do I localize the calendar?

Accepted Answer

Pass the locale to the Calendar, or wrap it in your locale provider: month and day names and the first day of the week follow it. Format any dates you print with `Intl.DateTimeFormat` in the same locale.

Question 11

How do I change the selected day's color?

Accepted Answer

The selected day uses your theme's `primary` and `primary-foreground` tokens, and ranges use `muted` between their ends. Change the tokens to restyle every calendar, or add classes to the day cells as the custom day style example does.

Question 12

How do I mark special dates?

Accepted Answer

Give those days their own classes, as the custom day style example does for booked days, or add a small label inside the day. Pair color with text or a disabled state so the meaning reaches screen readers too.

Question 13

Which libraries do calendar examples depend on?

Accepted Answer

shadcn.io's Calendar and, in some examples, Dialog, Select, Button, Field, Input and Scroll Area, styled with Tailwind CSS. They run on React with Base UI, React Aria, Ark UI or Radix UI, and on Vue, Svelte and Solid with Ark UI. No date library is needed.

Question 14

Are the calendars accessible?

Accepted Answer

Yes. The month is a grid where the arrow keys move between days, Page Up and Page Down between months, and Enter or Space selects. Each day is labeled with its full date, and unavailable days are announced as such.

Question 15

Do the calendars work with server rendering?

Accepted Answer

The calendar renders on the server and becomes interactive on the client. Pass the selected value and any limits, such as unavailable dates, as props from your data.

Question 16

Which Tailwind CSS version do they need?

Accepted Answer

Tailwind CSS v4, with the theme tokens shadcn.io's components use.

Calendar Examples

Calendar as Appointment Picker in Dialog

Calendar with Custom Select Day Style in Dialog

Calendar with Date and Time in Dialog

Calendar with Disabled Dates in Dialog

Calendar with Month and Year Selector in Dialog

Calendar with Multiple Day Selection in Dialog

Calendar with Natural Language in Dialog

Calendar with Range in Dialog

Calendar as Appointment Picker

Calendar with Custom Select Day Style

Calendar with Date and Time

Calendar with Disabled Dates

More component examples

Checkbox

Combobox

Date Picker

Radio Group

Slider

Switch

Card

Carousel

Calendar examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every calendar example. One prompt away.