Atomic Components
calendar
Explore all 32 calendar variations with different features and styling options. Each calendar maintains its own independent state. The copy button allows you to copy the variant name to your clipboard.
Simple calendar with single date selection and default styling
Calendar showing two months side by side for better navigation
Select multiple dates with a maximum limit of 5 dates
Select a date range with start and end dates
Date range selection across two months for better visibility
Date range selection with minimum 5 days requirement
Date range with minimum 2 and maximum 20 nights constraint
Calendar with past dates disabled for future bookings
Range selection with weekends disabled for business days only
Calendar wrapped in a card with appointment booking interface
Calendar restricted to specific months (June-July only)
Calendar with language switching between English and Spanish
Calendar with configurable dropdown navigation options
Calendar showing booked dates with strikethrough styling
Calendar displaying week numbers for better date reference
Calendar combined with time input fields for scheduling
Compact version of date and time picker with inline time inputs
Calendar with larger cells and ghost button variant
Calendar with preset buttons for common date selections
Calendar with time slot selection for appointment booking
Calendar displaying different prices for weekdays and weekends
Date picker in a popover with dropdown navigation
Date range picker in a popover for compact interfaces
Inline date and time picker with separate inputs
Vertical layout for date and time selection
Hotel-style check-in and check-out date picker with times
Calendar integrated with analytics chart for data visualization
Text input with calendar popup for flexible date entry
Calendar with natural language parsing (e.g., 'in 2 days')
Calendar with intelligent date range formatting
Calendar with event display and scheduling capabilities
Calendar optimized for mobile with drawer interface