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, May 2025

27
28
29
30
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

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.

ButtonButtons 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), May 2025

27
28
29
30
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

Uncontrolled

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

Date range (uncontrolled), May 2025

27
28
29
30
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

Examples

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

Get premium blocksCreate stunning, professional-grade layouts that not only save time but also elevate the quality of your projects.