Calendar Component
Calendar with Month, Week and Day views, time grid, event cards in 8 color variants, and navigation.
Month View
May 2026Week 20
May 1, 2026 – May 31, 2026
Mon
Tues
Wed
Thu
Fri
Sat
Sun
27
28
29
30
1
2
House inspection
11:00 AM
3
Ava's engagement party
1:00 PM
4
Monday standup
9:00 AM
Deep work
9:15 AM
5
One-on-one
10:00 AM
Lunch with team
12:45 PM
6
Deep work
9:00 AM
Design sync
10:30 AM
SEO planning
1:30 PM
7
All-hands
4:00 PM
8
Friday standup
9:00 AM
Coffee with Alex
9:30 AM
Product demo
1:30 PM
2 more...
9
10
11
Monday standup
9:00 AM
Sprint planning
10:00 AM
Lunch with Olivia
12:00 PM
1 more...
12
Content planning
8:30 AM
Daily standup
9:30 AM
1:1 with manager
11:00 AM
1 more...
13
Daily standup
9:00 AM
Design sync
10:00 AM
Lunch break
12:30 PM
1 more...
14
Daily standup
9:00 AM
Product roadmap review
10:30 AM
Team retrospective
2:00 PM
1 more...
15
Friday standup
9:00 AM
Code review session
10:00 AM
Lunch & learn
12:00 PM
1 more...
16
Half marathon
7:00 AM
17
18
Monday standup
9:00 AM
Deep work
9:15 AM
19
One-on-one
10:00 AM
Lunch with team
12:45 PM
20
Deep work
9:00 AM
Design sync
10:30 AM
SEO planning
1:30 PM
21
All-hands
4:00 PM
22
Friday standup
9:00 AM
Coffee with Alex
9:30 AM
Product demo
1:30 PM
2 more...
23
24
25
Monday standup
9:00 AM
Deep work
9:15 AM
26
One-on-one
10:00 AM
Lunch with team
12:45 PM
27
Deep work
9:00 AM
Design sync
10:30 AM
SEO planning
1:30 PM
28
All-hands
4:00 PM
29
Friday standup
9:00 AM
Product demo
1:30 PM
30
31
Week View
May 2026Week 20
May 11, 2026 – May 17, 2026
Mon
11
Tue
12
Wed
13
Thu
14
Fri
15
Sat
16
Sun
17
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
Monday standup
9:00 AM – 9:30 AMSprint planning
10:00 AM – 11:30 AMLunch with Olivia
12:00 PM – 1:00 PMDesign review
2:00 PM – 3:00 PMContent planning
8:30 AM – 9:30 AMDaily standup
9:30 AM – 10:00 AM1:1 with manager
11:00 AM – 11:30 AMMarketing sync
2:00 PM – 3:00 PMDaily standup
9:00 AM – 9:30 AMDesign sync
10:00 AM – 12:00 PMLunch break
12:30 PM – 1:30 PMUser research debrief
3:00 PM – 4:00 PMDaily standup
9:00 AM – 9:30 AMProduct roadmap review
10:30 AM – 12:00 PMTeam retrospective
2:00 PM – 3:00 PMDocumentation time
4:00 PM – 5:00 PMFriday standup
9:00 AM – 9:30 AMCode review session
10:00 AM – 11:00 AMLunch & learn
12:00 PM – 1:00 PMWeek wrap-up
3:00 PM – 3:30 PMHalf marathon
7:00 AM – 9:00 AMDay View
May 17, 2026Week 20
Sunday
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
Extended Time Range (6 AM – 10 PM)
May 2026Week 20
May 11, 2026 – May 17, 2026
Mon
11
Tue
12
Wed
13
Thu
14
Fri
15
Sat
16
Sun
17
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
Monday standup
9:00 AM – 9:30 AMSprint planning
10:00 AM – 11:30 AMLunch with Olivia
12:00 PM – 1:00 PMDesign review
2:00 PM – 3:00 PMContent planning
8:30 AM – 9:30 AMDaily standup
9:30 AM – 10:00 AM1:1 with manager
11:00 AM – 11:30 AMMarketing sync
2:00 PM – 3:00 PMDaily standup
9:00 AM – 9:30 AMDesign sync
10:00 AM – 12:00 PMLunch break
12:30 PM – 1:30 PMUser research debrief
3:00 PM – 4:00 PMDaily standup
9:00 AM – 9:30 AMProduct roadmap review
10:30 AM – 12:00 PMTeam retrospective
2:00 PM – 3:00 PMDocumentation time
4:00 PM – 5:00 PMFriday standup
9:00 AM – 9:30 AMCode review session
10:00 AM – 11:00 AMLunch & learn
12:00 PM – 1:00 PMWeek wrap-up
3:00 PM – 3:30 PMHalf marathon
7:00 AM – 9:00 AMUsage examples
Copy-paste-ready snippets for Month / Week / Day views.
Basic month view
Minimal setup with events list
razor
<Calendar @bind-View="view"
@bind-CurrentDate="currentDate"
Events="events"
MaxMonthEvents="3"
OnEventClick="HandleEventClick" />
@code {
private CalendarView view = CalendarView.Month;
private DateOnly currentDate = DateOnly.FromDateTime(DateTime.Today);
private List<CalendarEventItem> events = new()
{
new("Sprint planning", DateTime.Today.AddHours(10), 90, "purple"),
new("Lunch with Olivia", DateTime.Today.AddHours(12), 60, "pink"),
};
private void HandleEventClick(CalendarEventItem evt) { /* ... */ }
}Week view with time grid
Drag-to-select slots + event click handler
razor
<Calendar @bind-View="view"
@bind-CurrentDate="currentDate"
Events="events"
OnTimeSlotClick="HandleSlotClick"
OnTimeSlotSelected="HandleRangeSelected"
OnEventClick="HandleEventClick" />
@code {
private CalendarView view = CalendarView.Week;
private void HandleSlotClick(CalendarTimeSlotSelection slot) { /* single click */ }
private void HandleRangeSelected(CalendarTimeSlotSelection slot) { /* drag to select */ }
}Custom hours
StartHour / EndHour narrow the time grid
razor
@* Narrow the visible time range to 6 AM – 10 PM *@
<Calendar @bind-View="view"
@bind-CurrentDate="currentDate"
Events="events"
StartHour="6"
EndHour="22" />