Calendar Component Playground

Interactive playground to test all Calendar props and variants

Props

Mode

Selected Dates

Start: None

End: None

Preview

March 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Code

<Calendar />

Component Documentation

Features

Date range selection with visual feedback
Month picker mode (mode="month"): select a month with title and year navigation
Month/year navigation
Date states: default, disabled, range, select start, select end
Cancel and Apply buttons
Fully accessible with ARIA labels

Usage

Click on dates to select a range. The first click selects the start date, and the second click selects the end date. Dates between the start and end dates are highlighted in blue. Use the month navigation arrows to change months. Click Apply to confirm your selection or Cancel to reset.