Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Calendar with Custom Select Day Style in Dialog
A calendar dialog with custom day styling using modifiers and modifiersStyles for visual date categorization
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Default calendars provide limited date context. This React calendar dialog adds custom styling with modifiers highlighting special dates like bookings or events using shadcn/ui and react-day-picker. Built with Dialog, Calendar, and modifiersStyles prop, specific dates show unique colors and styling. Perfect for booking calendars showing availability status, event calendars highlighting multiple event types, or project timelines where visual date categorization improves information density and user understanding at a glance.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Custom Styled Calendar Inline
Modifier styling without dialog
Disabled Dates Dialog
Calendar with date restrictions
Standard Dialog
Basic modal dialog structure
Multiple Selection Dialog
Multi-date selection calendar
Range Calendar Dialog
Dual-month range selection
Button Component
Action buttons