shadcn.io is not affiliated with official shadcn/ui
Calendar examples · Standard
Calendar with Month and Year Selector for React
A calendar with month and year dropdowns in place of the previous and next buttons.
A Calendar whose header is two Selects, month and year, instead of arrows. Jump straight to a month decades away without paging through it. Use it for birthdays, expiry dates and history, where the date is far from today.
Preview
Installation
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.
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.
How are the dropdowns named for assistive tech?
SelectTrigger copies the dropdown aria-label. DropdownNav lays the two triggers out in flex w-full items-center gap-2, and the trigger uses first:flex-1.
Related
- Calendar with RangeA two-month calendar for selecting a
- Calendar as Appointment PickerA calendar beside a scrolling list of
- Date Picker with RangeA date range picker that shows two months
- Calendar with Disabled DatesA calendar that disables weekends, a
- Date Picker as Appointment PickerA date picker that opens a calendar
- Calendar with Custom Select Day StyleA calendar with round days that