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: 06/01/2026

Code:

<Calendar @bind-SelectedDate="selectedDate" />

---

Selection Modes

None — Display Only

Day — Single Day (Default)

Selected: 06/01/2026

DayWeek — Select Entire Weeks

Selected: 06/01/2026

DayWeekMonth — Select Weeks or Month

Selected: 06/01/2026

Code:

<Calendar SelectionMode="DayWeek" @bind-SelectedDate="weekDate" />
<Calendar SelectionMode="DayWeekMonth" @bind-SelectedDate="monthDate" />

---

Display Options

Grid Lines

Without Title

Without Day Header

< June 2026 >
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	11

Code:

<Calendar ShowGridLines="true" />
<Calendar ShowTitle="false" />
<Calendar ShowDayHeader="false" />

---

Day Name & Title Formats

Full Day Names

< June 2026 >
Sunday	Monday	Tuesday	Wednesday	Thursday	Friday	Saturday
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	11

First Letter Only

< June 2026 >
S	M	T	W	T	F	S
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	11

Month-Only Title

< June >
Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	11

Code:

<Calendar DayNameFormat="Full" />
<Calendar DayNameFormat="FirstLetter" />
<Calendar TitleFormat="Month" />

---

Custom Navigation Text

« Prev June 2026 Next »
Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	11

Code:

<Calendar NextMonthText="Next &raquo;" PrevMonthText="&laquo; Prev" />

---

Styled Calendar

Apply CSS classes to title, selected day, today, and weekend cells:

< June 2026 >
Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	11

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:

< June 2026 >
Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	11

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:

< June 2026 >
Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	11

Selected: 06/01/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++;
}