Lunar Kit LogoLunar Kit
Components

Calendar

A calendar component for selecting dates, with support for single date, month, and year selection.

Demo
Code
February
2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Installation

lunar add calendar

Usage

import { Calendar } from '@/components/ui/calendar';

Basic Usage

const [date, setDate] = useState<Date>();
 
<Calendar
value={date}
onValueChange={setDate}
/>

Variants

// Date picker (default)
<Calendar variant="date" value={date} onValueChange={setDate} />
 
// Month picker
<Calendar variant="month" value={date} onValueChange={setDate} />
 
// Year picker
<Calendar variant="year" value={date} onValueChange={setDate} />

Date Range Selection

Select a range of dates:

const [startDate, setStartDate] = useState<Date>();
const [endDate, setEndDate] = useState<Date>();
 
<Calendar
mode="range"
startDate={startDate}
endDate={endDate}
onRangeChange={(start, end) => {
  setStartDate(start);
  setEndDate(end);
}}
/>

With Min/Max Dates

Restrict selectable dates:

<Calendar
value={date}
onValueChange={setDate}
minDate={new Date(2024, 0, 1)}
maxDate={new Date(2024, 11, 31)}
/>

Maximum Days for Range

Limit the number of days that can be selected in a range:

<Calendar
mode="range"
startDate={startDate}
endDate={endDate}
onRangeChange={handleRangeChange}
maxDays={7}
/>

API Reference

Calendar

PropTypeDefaultDescription
valueDate—Selected date (single mode)
onValueChange(date: Date) => void—Callback when date changes
variant'date' | 'month' | 'year''date'Picker variant
mode'single' | 'range''single'Selection mode
startDateDate—Range start date
endDateDate—Range end date
onRangeChange(start, end) => void—Callback for range changes
minDateDate—Minimum selectable date
maxDateDate—Maximum selectable date
maxDaysnumber—Max days for range selection
classNamestring—Additional classes

Previous

Button

Next

Card

On this page