Date and Time

Range 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.

Range Calendar, January 2025

29
30
31
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

Installation

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

Composed Components

Plug this component into the CLI, and it automatically loads all the included components. No need to add them individually.

The Range Calendar comes packed with a variety of components to make it stand out.

Button

Buttons be the real MVPs, man! They're all about gettin' stuff done, whether it’s slamming that form submit or hoppin' to another page.

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.

Date range (controlled), January 2025

29
30
31
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

Uncontrolled

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

Date range (uncontrolled), January 2025

29
30
31
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

Examples

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

SwitchField