shadcn.io is an independent project built on shadcn/ui
Three days start selected: the 6th, the 15th, and the 24th of this month. One month is on screen. Another click adds a day or drops one from that list.
Use it for dates that are not a continuous stretch, such as several shifts. A start and an end belong in a range. A field that opens this grid is a Date Picker. In React, Base UI does not know which days matter.
Installation
Anatomy
Usage
<Calendar
className="rounded-md border"
mode="multiple"
onSelect={setDates}
selected={dates}
/>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.
API Reference
Calendar
Sets mode="multiple", onSelect={setDates} and selected={dates}. The rest is on the Calendar page.
