Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar examples · Dialog

Calendar with Month and Year Selector in Dialog for React

A button that opens a dialog with a calendar navigated by month and year dropdowns.

Framework
UI library

The month and year calendar inside a Dialog: a Select Date button opens it, and two selects at the top move the month shown. The dropdowns open above the dialog.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How do the month and year dropdowns work?

captionLayout="dropdown" and hideNavigation replace the previous and next buttons with month and year dropdowns. components.Dropdown renders each as a Select, and month with onMonthChange tracks the visible month apart from selected.

Where is the dialog in this file?

CalendarDropdown returns a Dialog whose content is the month or year Select. The Calendar itself stays on the page, with captionLayout="dropdown" and hideNavigation.

How do I read the selected date?

mode="single" makes selected one date and onSelect the setter. This demo stores that date in state, starting from new Date().

Which years are in the year dropdown?

The year Select lists the options the calendar passes into Dropdown. A SelectItem sets disabled from option.disabled, so a year the calendar turns off stays disabled.

Can the visible month differ from the selected date?

Yes. selected is the chosen date, and month with onMonthChange is the month on screen.

What does the button say?

The button inside CalendarDropdown reads Select Date, and DialogTitle repeats Select Date. That button opens the dropdown dialog, and the calendar stays on the page.

All 16 calendar examples