shadcn.io is an independent project built on shadcn/ui
One month is on screen. Weekends, the 3rd through the 7th, and the 22nd cannot be picked. Clicking one of those days leaves the selection where it was.
Use it for days you do not offer, such as weekends or a closed stretch. Tint a booked day you still allow, instead of disabling it. Open the same rules from a Date Picker. In React, Ark UI does not invent the blocked days.
Installation
Anatomy
Usage
<Calendar
className="rounded-md border"
isDateUnavailable={isDateUnavailable}
onValueChange={handleValueChange}
value={value}
>
<CalendarViewControl>
<CalendarPrevTrigger />
<CalendarViewDate />
<CalendarNextTrigger />
</CalendarViewControl>
<CalendarTable>
<CalendarWeekDays />
<CalendarTableDays />
</CalendarTable>
</Calendar>FAQ
Which days can't be picked?
isDateUnavailable returns true for Saturday and Sunday, for the 3rd through the 7th, and for the 22nd of the current month.
Why are those dates built from year, month and day?
The unavailable dates are built with parseDate from a local year, month and day, so they carry no time and do not shift with the time zone.
How do I read the selected date?
value is a list holding the selected date, and onValueChange receives { value }. This demo starts the list from parseDate(new Date()).
What happens if someone clicks a disabled day?
That day can't be picked, so the selected date stays on the day already chosen. The rules cover weekends, the 3rd through the 7th, and the 22nd.
API Reference
Calendar
Sets isDateUnavailable={isDateUnavailable}, onValueChange={handleValueChange} and value={value}. The rest is on the Calendar page.
