Docs
Calendar

Calendar

A date field component that allows users to enter and edit date.

April 2024
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
1
2
3
4
Event Date, April 2024

About

The <Calendar /> component is built on top of the RadixVue Calendar component, which uses the @internationalized/date package to handle dates.

If you're looking for a range calendar, check out the Range Calendar component.

Installation

bash
npx shadcn-vue@latest add calendar

Datepicker

You can use the <Calendar /> component to build a date picker. See the Date Picker page for more information.

Examples

Form

Your date of birth is used to calculate your age.

Advanced Customization

Month & Year Selects

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
1
2
3
4
Event Date, April 2024
Edit this page on GitHub