Calendar
A calendar component for selecting a date, a range of dates, or navigating with month and year selectors.
Installation
Single Date
Use selected and on-select when the chosen day should stay in sync with local state.
Preview
Selected Date
{selectedDateLabel}
Use selected and on-select to keep the calendar aligned with your app state.
1<div class="flex w-full flex-col items-center gap-6 lg:flex-row lg:items-start lg:justify-center">
2 <x-calendar
3 mode="single"
4 selected="{selectedDate}"
5 on-select="{handleSelectDate}"
6 class="rounded-lg border shadow-none"
7 />
8 <div class="w-full max-w-xs rounded-xl border bg-background p-5 text-left shadow-sm">
9 <p class="text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground">Selected Date</p>
10 <p class="mt-3 text-lg font-semibold">{selectedDateLabel}</p>
11 <p class="mt-2 text-sm leading-6 text-muted-foreground">
12 Use selected and on-select to keep the calendar aligned with your app state.
13 </p>
14 </div>
15</div>
Range Calendar
Use mode="range" to collect a start and end date from the same calendar surface.
Preview
Trip Window
{rangeStartLine}
{rangeEndLine}
Use mode="range" to collect a start and end date.
1<div class="flex w-full flex-col items-center gap-6 lg:flex-row lg:items-start lg:justify-center">
2 <x-calendar
3 mode="range"
4 selected="{rangeSelection}"
5 on-select="{handleSelectRange}"
6 default-month="2026-05-01"
7 class="rounded-lg border shadow-none"
8 />
9 <div class="w-full max-w-xs rounded-xl border bg-background p-5 text-left shadow-sm">
10 <p class="text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground">
11 Trip Window
12 </p>
13 <div class="mt-4 space-y-2">
14 <p class="text-sm font-semibold">{rangeStartLine}</p>
15 <p class="text-sm font-semibold">{rangeEndLine}</p>
16 </div>
17 <p class="mt-3 text-sm leading-6 text-muted-foreground">
18 Use mode="range" to collect a start and end date.
19 </p>
20 </div>
21</div>
Month And Year Selector
Use caption-layout="dropdown" to switch months and years quickly, and month state when you need to track the visible month.
Preview
Dropdown Caption
{visibleMonthLine}
{monthSelectionLine}
Use caption-layout="dropdown" to switch months and years quickly.
1<div class="flex w-full flex-col items-center gap-6 lg:flex-row lg:items-start lg:justify-center">
2 <x-calendar
3 mode="single"
4 selected="{monthSelectionDate}"
5 on-select="{handleMonthSelectionDate}"
6 month="{visibleMonth}"
7 on-month-change="{handleVisibleMonthChange}"
8 caption-layout="dropdown"
9 from-year="2024"
10 to-year="2028"
11 class="rounded-lg border shadow-none"
12 />
13 <div class="w-full max-w-xs rounded-xl border bg-background p-5 text-left shadow-sm">
14 <p class="text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground">
15 Dropdown Caption
16 </p>
17 <div class="mt-4 space-y-2">
18 <p class="text-sm font-semibold">{visibleMonthLine}</p>
19 <p class="text-sm font-semibold">{monthSelectionLine}</p>
20 </div>
21 <p class="mt-3 text-sm leading-6 text-muted-foreground">
22 Use caption-layout="dropdown" to switch months and years quickly.
23 </p>
24 </div>
25</div>