Shadcn.io is not affiliated with official shadcn/ui
Calendar with Custom Select Day Style in Dialog
A calendar dialog with custom day styling using modifiers and modifiersStyles for visual date categorization
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.
Calendar with Custom Select Day Style in Dialog preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.