shadcn.io is not affiliated with official shadcn/ui
Calendar examples · Standard
Calendar with Multiple Day Selection for React
A calendar that selects several separate days at once.
A Calendar in multiple selection mode: each click adds or removes a day. It starts with three days of the current month. Use it for availability, recurring sessions and any set of days that isn't a range.
Preview
Installation
FAQ
How do I read the selected days?
mode="multiple" makes selected an array of dates and onSelect the setter. This demo starts with the 6th, the 15th and the 24th of the current month.
Which days start selected?
The 6th, the 15th and the 24th of the current month. State starts as those three dates, and the calendar renders the list its change handler returns.
What wraps the grid?
The Calendar className is rounded-md border. Several days come from the selection prop on that same element.
What does the change handler receive?
onSelect receives the next array of dates, and this demo stores it with setDates.
Related
- Calendar as Appointment PickerA calendar beside a scrolling list of
- Calendar with Disabled DatesA calendar that disables weekends, a
- Badge with Text (Standard)A default badge with a short label for a
- Calendar with Custom Select Day StyleA calendar with round days that
- Simple TooltipAn outline button that shows a one-line
- Calendar with Range in DialogA button that opens a dialog with a