Calendar Component
Calendar with Month, Week and Day views, time grid, event cards in 8 color variants, and navigation.
Month View
July 2026Week 28
Jul 1, 2026 – Jul 31, 2026
Mon
Tues
Wed
Thu
Fri
Sat
Sun
29
30
1
2
3
4
House inspection
11:00 AM
5
Ava's engagement party
1:00 PM
6
Monday standup
9:00 AM
Sprint planning
10:00 AM
Lunch with Olivia
12:00 PM
1 more...
7
Content planning
8:30 AM
Daily standup
9:30 AM
1:1 with manager
11:00 AM
1 more...
8
Daily standup
9:00 AM
Design sync
10:00 AM
Lunch break
12:30 PM
1 more...
9
Daily standup
9:00 AM
Product roadmap review
10:30 AM
Team retrospective
2:00 PM
1 more...
10
Friday standup
9:00 AM
Code review session
10:00 AM
Lunch & learn
12:00 PM
1 more...
11
12
13
Monday standup
9:00 AM
Deep work
9:15 AM
14
One-on-one
10:00 AM
Lunch with team
12:45 PM
15
Deep work
9:00 AM
Design sync
10:30 AM
SEO planning
1:30 PM
16
All-hands
4:00 PM
17
Friday standup
9:00 AM
Product demo
1:30 PM
18
Half marathon
7:00 AM
19
20
Monday standup
9:00 AM
Deep work
9:15 AM
21
One-on-one
10:00 AM
Lunch with team
12:45 PM
22
Deep work
9:00 AM
Design sync
10:30 AM
SEO planning
1:30 PM
23
All-hands
4:00 PM
24
Friday standup
9:00 AM
Coffee with Alex
9:30 AM
Product demo
1:30 PM
2 more...
25
26
27
Monday standup
9:00 AM
Deep work
9:15 AM
28
One-on-one
10:00 AM
Lunch with team
12:45 PM
29
Deep work
9:00 AM
Design sync
10:30 AM
SEO planning
1:30 PM
30
All-hands
4:00 PM
31
Friday standup
9:00 AM
Product demo
1:30 PM
1
2
Week View
July 2026Week 28
Jul 6, 2026 – Jul 12, 2026
Mon
6
Tue
7
Wed
8
Thu
9
Fri
10
Sat
11
Sun
12
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 PMDay View
July 11, 2026Week 28
Saturday
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)
July 2026Week 28
Jul 6, 2026 – Jul 12, 2026
Mon
6
Tue
7
Wed
8
Thu
9
Fri
10
Sat
11
Sun
12
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 PMUsage 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" />