JollyUI
  1. Docs
  2. components
  3. RangeCalendar

RangeCalendar

A RangeCalendar displays a calendar interface that allows users to select a range of dates.

Docs

There is no standalone range calendar element in HTML. Two separate <input type="date"> elements could be used, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. RangeCalendar helps achieve accessible and international range calendar components that can be styled as needed.

Trip dates, 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

npx shadcn@latest add https://jollyui.dev/default/calendar

Composed Components

A RangeCalendar uses the following components, which may also be used standalone or reused in other components.

Button

A button allows a user to perform an action, with mouse, touch, and keyboard interactions.

Reusable Wrapper - Example

If you will use a RangeCalendar in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.

The installed file includes a reusable wrapper JollyRangeCalendar. This wrapper serves as an excellent starting point for use throughout your codebase.

Component rangecalendar-reusable not found in registry.

The JollyRangeCalendar component extends the props of React Aria RangeCalendar and adds:

PropTypeDefaultDescription
errorMessagestring | undefinedundefinedError message to display

You can copy this wrapper and create variations as needed for different use cases in your application. This approach promotes consistency while still allowing for flexibility in implementation.

Examples

Basic

Trip dates, 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

Multi-Month

Trip dates, December 2024 to February 2025

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
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
26
27
28
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
1

Validation

Trip dates, 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

Unavailable Dates

Trip dates, 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

Non-Continuous Ranges

Trip dates, 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

Error Message

Trip dates, 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
Maximum stay duration is 1 week

Disabled

Trip dates, 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

Read-only

Trip dates, 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
Date Range PickerTimeField