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.

January 2026

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
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#

January 2026

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

Min/Max Dates#

Selectable dates: Tue Jan 06 2026 to Fri Jan 16 2026

January 2026

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

Unavailable Dates#

All Sundays are unavailable for selection.

January 2026

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
Was this guide helpful?
Ask Anything
Ask any questions about Medusa. Get help with your development.
You can also use the Medusa MCP server in Cursor, VSCode, etc...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
⇧↵