1. Docs
  2. Components
  3. Calendar

Calendar

A calendar displays one or more date grids and allows users to select a single date.

Installation

Anatomy

Examples

Range

API Reference

Calendar.Root

PropTypeDefault
value
DateValue
defaultValue
DateValue
onChange
function
minValue
DateValue
maxValue
DateValue
isDisabled
boolean
isReadOnly
boolean
isDateUnavailable
function
variant
enum

Calendar.Header

PropTypeDefault
className
string

Calendar.Nav

PropTypeDefault
className
string

Calendar.Month

PropTypeDefault
className
string

Calendar.Grid

PropTypeDefault
className
string

Calendar.GridHeader

PropTypeDefault
children
function

Calendar.HeaderCell

PropTypeDefault
className
string

Calendar.GridBody

PropTypeDefault
children
function

Calendar.Cell

PropTypeDefault
date
CalendarDate
shape
enum
"default"
className
string

RangeCalendar.Root

Used for selecting date ranges. Accepts the same props as Calendar.Root but with range values.

PropTypeDefault
value
RangeValue<DateValue>
defaultValue
RangeValue<DateValue>
onChange
function
minValue
DateValue
maxValue
DateValue
isDisabled
boolean
isReadOnly
boolean
isDateUnavailable
function
variant
enum