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, Ark UI does not know which days matter.
Installation
Anatomy
Usage
<Calendar
className="rounded-md border"
onValueChange={handleValueChange}
selectionMode="multiple"
value={value}
>
<CalendarViewControl>
<CalendarPrevTrigger />
<CalendarViewDate />
<CalendarNextTrigger />
</CalendarViewControl>
<CalendarTable>
<CalendarWeekDays />
<CalendarTableDays />
</CalendarTable>
</Calendar>FAQ
How do I read the selected days?
selectionMode="multiple" makes value a list of dates, and onValueChange receives { value }. 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?
onValueChange receives { value }, the next list of dates, and this demo stores details.value.
API Reference
Calendar
Sets onValueChange={handleValueChange}, selectionMode="multiple" and value={value}. The rest is on the Calendar page.
