Calendar
Calendar date display with month/year navigation, date range selection, and locale support
Calendar
A beautiful, feature-rich calendar with single, multiple, and range selection modes plus rich customization options.
Single Date Selection
Default
Bordered
Glass
Visual Variants
Stronger glass and gradient backgrounds for more expressive UIs.
Glass Strong
Gradient
Sizes
Adjust the calendar footprint to match your layout.
Small
Medium (default)
Large
Color Variants
Apply semantic theme colors to highlight selection states.
primary
secondary
accent
success
warning
error
info
Bordered Color Variants
Colored borders that match the theme color without hover emphasis.
primary border
accent border
success border
error border
Range Selection – Color Variants
Selected range: None
Accent Range
Success Range
Info Range
Range Selection – Variants
default variant
bordered variant
glass variant
glass-strong variant
gradient variant
Multiple Date Selection
Selected dates: 0 dates
Select multiple dates
Selected dates list
No dates selected
Advanced Features
Disable specific dates, constrain selectable ranges, and more.
Disabled dates (weekends)
Date range limits (current month)
Customization Options
Week starts on Monday
Without action buttons
Border Radius Options
Small radius
Large radius (default)
Extra large radius
Usage Guidelines
When to Use
- Date displays
- Event calendars
- Booking interfaces
Accessibility
- Full keyboard navigation
- Dates announced with context
Performance
- Efficient date calculations
- Memoized month rendering
Common Mistakes
- No clear current date indicator
- Can select disabled dates