Menu

Calendar

A component for displaying a calendar interface with date selection capability.

In this guide, you'll learn how to use the Calendar component.

September 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
Was this example helpful?

Usage#

Code
import { Calendar } from "@medusajs/ui"
Code
<Calendar />

API Reference#

Calendar component used to select a date. Its props are based on React Aria Calendar.

PropTypeDefault
value
Date
|null
 -
defaultValue
Date
|null
 -
onChange
function
 -
isDateUnavailable
function
 -
minValue
Date
 -
maxValue
Date
 -
Was this helpful?

Examples#

Controlled#

September 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
Selected: None
Was this example helpful?

Min/Max Dates#

Selectable dates: Tue Sep 02 2025 to Fri Sep 12 2025

September 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
Was this example helpful?

Unavailable Dates#

All Sundays are unavailable for selection.

September 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
Was this guide helpful?
Ask Anything
FAQ
What is Medusa?
How can I create a module?
How can I create a data model?
How do I create a workflow?
How can I extend a data model in the Product Module?
Recipes
How do I build a marketplace with Medusa?
How do I build digital products with Medusa?
How do I build subscription-based purchases with Medusa?
What other recipes are available in the Medusa documentation?
Chat is cleared on refresh
Line break
⇧↵