Calendar Component Samples
The Calendar control displays a one-month calendar and lets users select dates and navigate
between months. In Web Forms this was <asp:Calendar>.
Basic Calendar
Selected Date: 09/07/2026
Code:
<Calendar @bind-SelectedDate="selectedDate" />
Selection Modes
None — Display Only
|
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|
| 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 | 29 | 30 | 1 | 2 | 3 |
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
Day — Single Day (Default)
Selected: 09/07/2026
DayWeek — Select Entire Weeks
Selected: 09/07/2026
DayWeekMonth — Select Weeks or Month
Selected: 09/07/2026
Code:
<Calendar SelectionMode="DayWeek" @bind-SelectedDate="weekDate" />
<Calendar SelectionMode="DayWeekMonth" @bind-SelectedDate="monthDate" />
Display Options
Grid Lines
Without Title
Without Day Header
Code:
<Calendar ShowGridLines="true" />
<Calendar ShowTitle="false" />
<Calendar ShowDayHeader="false" />
Day Name & Title Formats
Full Day Names
First Letter Only
Month-Only Title
Code:
<Calendar DayNameFormat="Full" />
<Calendar DayNameFormat="FirstLetter" />
<Calendar TitleFormat="Month" />
Custom Navigation Text
Code:
<Calendar NextMonthText="Next »" PrevMonthText="« Prev" />
Styled Calendar
Apply CSS classes to title, selected day, today, and weekend cells:
Code:
<Calendar CssClass="styled-calendar"
TitleStyleCss="calendar-title"
SelectedDayStyleCss="selected-day"
TodayDayStyleCss="today-day"
ShowGridLines="true" />
TableItemStyle Sub-Components
The recommended approach uses child sub-components instead of CSS-class strings.
Sub-components support BackColor, ForeColor, Font, and more:
Code:
<Calendar ShowGridLines="true" @bind-SelectedDate="date">
<TitleStyleContent>
<CalendarTitleStyle CssClass="subcmp-title" />
</TitleStyleContent>
<DayHeaderStyleContent>
<CalendarDayHeaderStyle CssClass="subcmp-day-header" />
</DayHeaderStyleContent>
<SelectedDayStyleContent>
<CalendarSelectedDayStyle CssClass="subcmp-selected-day" />
</SelectedDayStyleContent>
</Calendar>
TodaysDate Override
The TodaysDate property overrides which date the calendar considers "today".
This is useful for testing or displaying a calendar anchored to a specific date.
Calendar thinks today is: 12/25/2025
<Calendar TodaysDate="@(new DateTime(2025, 12, 25))" />
Event Handling
Track selection changes and month navigation, matching the Web Forms
SelectionChanged and VisibleMonthChanged events:
Selected: 09/07/2026
Selection changed 0 time(s)
Month navigated 0 time(s)
Code:
<Calendar @bind-SelectedDate="eventDate"
OnSelectionChanged="HandleSelectionChanged"
OnVisibleMonthChanged="HandleMonthChanged" />
@code {
void HandleSelectionChanged() => selectionChangedCount++;
void HandleMonthChanged(CalendarMonthChangedArgs args) => monthChangedCount++;
}