Calendar components

Learn how to use the calendar components in your project.

Calendar example

JUN
13
June 2025Week 2
Jun 1, 2025 – Jun 30, 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
Coffee with Ali11:30 AM
Marketing site kickoff2:30 PM
10
11
12
All-hands meeting4:00 PM
Dinner with Candice6:30 PM
13
Friday standup9:00 AM
Olivia x Riley10:00 AM
Product demo1:30 PM
14
House inspection11:00 AM
15
Ava's engagment party1:00 PM
16
Monday standup9:00 AM
Content planning11:00 AM
17
Product demo10:30 AM
Catch up w/ Alex2:30 PM
18
Deep work9:00 AM
One-on-one w/ Eva10:00 AM
Design sync10:30 AM
2 more...
19
Lunch with Olivia12:00 PM
20
Coffee w/ Amélie9:30 AM
Design feedback session2:30 PM
21
Half marathon7:00 AM
22
23
Team lunch12:15 PM
24
25
Product planning9:30 AM
26
Amélie's first day10:00 AM
All-hands meeting4:00 PM
27
Accountant1:45 PM
Marketing site sync2:30 PM
28
29
30
Deep work9:15 AM
1
Quarterly review11:30 AM
Lunch with Zahir1:00 PM
2
Deep work9:00 AM
Design sync2:30 PM
3
Amélie coffee10:00 AM
Dinner with Candice7:00 PM
4
5

Friday, June 13, 2025

Friday standup9:00 AM
Olivia x Riley10:00 AM
Product demo1:30 PM

Installation

You can add this calendar component using our CLI or manually:

npx untitledui add calendar

Calendar examples

Below are examples and variations of this calendar component:

Calendar month view

JUN
13
June 2025Week 2
Jun 1, 2025 – Jun 30, 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
Coffee with Ali11:30 AM
Marketing site kickoff2:30 PM
10
11
12
All-hands meeting4:00 PM
Dinner with Candice6:30 PM
13
Friday standup9:00 AM
Olivia x Riley10:00 AM
Product demo1:30 PM
14
House inspection11:00 AM
15
Ava's engagment party1:00 PM
16
Monday standup9:00 AM
Content planning11:00 AM
17
Product demo10:30 AM
Catch up w/ Alex2:30 PM
18
Deep work9:00 AM
One-on-one w/ Eva10:00 AM
Design sync10:30 AM
2 more...
19
Lunch with Olivia12:00 PM
20
Coffee w/ Amélie9:30 AM
Design feedback session2:30 PM
21
Half marathon7:00 AM
22
23
Team lunch12:15 PM
24
25
Product planning9:30 AM
26
Amélie's first day10:00 AM
All-hands meeting4:00 PM
27
Accountant1:45 PM
Marketing site sync2:30 PM
28
29
30
Deep work9:15 AM
1
Quarterly review11:30 AM
Lunch with Zahir1:00 PM
2
Deep work9:00 AM
Design sync2:30 PM
3
Amélie coffee10:00 AM
Dinner with Candice7:00 PM
4
5

Friday, June 13, 2025

Friday standup9:00 AM
Olivia x Riley10:00 AM
Product demo1:30 PM

Calendar week view

JUN
13
June 2025Week 2
Jun 9, 2025 – Jun 15, 2025
Sun8
Mon9
Tue10
Wed11
Thu12
Fri13
Sat14
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
Friday standup
Olivia x Riley
10:00 AM
Product demo
1:30 PM
11:18 PM
Sun8
Mon9
Tue10
Wed11
Thu12
Fri13
Sat14
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
Coffee with Ali
11:30 AM
Marketing site kickoff
2:30 PM
All-hands meeting
4:00 PM
Dinner with Candice
6:30 PM
Friday standup
Olivia x Riley
10:00 AM
Product demo
1:30 PM
House inspection
11:00 AM
11:18 PM

Calendar day view

JUN
13
June 2025Week 2
Friday
Sun8
Mon9
Tue10
Wed11
Thu12
Fri13
Sat14
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
Friday standup
Olivia x Riley
10:00 AM
Product demo
1:30 PM
11:18 PM
Date pickersFile upload