Components

Range Calendar

A dual-date selection component that allows users to pick a date range, commonly used for booking and scheduling.

Basic

A range calendar displays one or more date grids and allows users to select a range of dates.

Range Calendar, March 2025

23
24
25
26
27
28
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
29
30
31
1
2
3
4
5

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Composed Components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

The Range Calendar comes packed with several components to enhance functionality and provide a seamless experience.

Buttons play a crucial role in functionality, whether for submitting a form or navigating to another page.

Manual Installation

Make sure you also install the composed components and the required packages for the component to function properly.

Controlled

The range calender can be controlled by passing the value prop.

Date range (controlled), March 2025

23
24
25
26
27
28
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
29
30
31
1
2
3
4
5

Uncontrolled

The range calendar can be uncontrolled by passing the defaultValue prop.

Date range (uncontrolled), March 2025

23
24
25
26
27
28
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
29
30
31
1
2
3
4
5

Examples

You can see the calendar in action within the Date Picker and Date Range Picker documentation.

Get premium Blocks

Create stunning, professional-grade layouts that not only save time but also elevate the quality of your projects.
Previous
Calendar
Next
Time Field