Components
Charts
Setting UpArea ChartLine ChartBar ChartPie ChartRadar ChartRadial Bar ChartScatter ChartTooltip ChartColors
Color AreaColor FieldColor PickerColor SliderColor SwatchColor Swatch PickerColor ThumbColor WheelDrag and drop
Drop ZoneForms
CheckboxCheckbox GroupFieldFormInput OTPNumber FieldRadio GroupSearch FieldTag FieldText FieldTextareaUtilities
Visually HiddenRange Calendar
Manage your dates, plan your schedule, and keep track of important events, all in one place, like a personal assistant for your time.
Basic
A range calendar displays one or more date grids and allows users to select a range of dates.
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
Composed Components
When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.
The Range Calendar's decked out with several components to make it bangin'.
Manual Installation
Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.
Controlled
The range calender can be controlled by passing the value prop.
Uncontrolled
The range calendar can be uncontrolled by passing the defaultValue prop.
Examples
You can see the calendar in action within the Date Picker and Date Range Picker documentation.