Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Calendar with Disabled Dates
A calendar with disabled dates highlighting unavailable or invalid dates through visual styling
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Not all dates are selectable. This React calendar uses react-day-picker's disabled prop to mark unavailable dates with visual indicators. Built with shadcn/ui styling and matcher functions, it prevents weekend bookings, past date selection, or custom business logic—perfect for appointment schedulers, vacation booking, or any system with date availability constraints.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Single Date Calendar
Basic calendar without date restrictions
Range Calendar
Date range selection calendar
Date Picker Input
Input field with calendar popover
Calendar in Dialog
Calendar within modal dialog
Multiple Date Selection
Select multiple individual dates
Calendar with Footer
Action buttons for date selection