Calendar

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

Component Source Primitive API Reference

Preview ​

February 2025
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
Event Date, February 2025

Dependencies ​

Installation ​

bash
npx sigma-ui add calendar

Examples ​

Form ​

Your date of birth is used to calculate your age.

Month & Year Selects ​

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
Event Date, February 2025

Localization ​

The locale can be changed with the locale prop. You can also format the month selector using the formatter composable:

ts
const locale = 'fr'
formatter.setLocale(locale)
vue
<CalendarRoot :locale="locale">
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
2
Event Date, février 2025
Edit this page on GitHub