Calendar

Usage examples, date ranges, date pickers, and best practices for calendars.

Basic Calendar

Select any date

Calendar with Select

Use dropdowns to quickly navigate to any month and year

Event Date

Events must be booked at least 1 day in advance

Date of Birth

Select your date of birth

Meeting Date

Weekdays only

Delivery Date

Deliveries available Monday-Saturday, within the next 2 weeks

Check-in / Check-out (Range)

Select your stay dates

Vacation Planning

Book 6 months to 2 years in advance. Max stay: 30 days (enforced by handler)

Huge Calendar (Range View)

Swift Calendar (Swift Range)

Positioning Intelligence

All calendar components use smart positioning to automatically determine whether to open above or below the input field. By default, they attempt to open below (bottom placement). If there‘s insufficient space, they intelligently flip to open above. This happens on first render with no animation jumps or visual glitches.

Default Behavior:

  • Opens below input with 8px spacing
  • Smooth scale and opacity animation
  • Maintains position on re-click

Fallback Behavior:

  • Flips to above if bottom space lacking
  • No jumping or animation artifacts
  • Respects safe margins on screen edges