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: 03/02/2026

Code:

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

---

Selection Modes

None — Display Only

Day — Single Day (Default)

Selected: 03/02/2026

DayWeek — Select Entire Weeks

Selected: 03/02/2026

DayWeekMonth — Select Weeks or Month

Selected: 03/02/2026

Code:

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

---

Display Options

Grid Lines

Without Title

Without Day Header

< March 2026 >
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	31	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

< March 2026 >
Sunday	Monday	Tuesday	Wednesday	Thursday	Friday	Saturday
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	31	1	2	3	4
5	6	7	8	9	10	11

First Letter Only

< March 2026 >
S	M	T	W	T	F	S
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	31	1	2	3	4
5	6	7	8	9	10	11

Month-Only Title

< March >
Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	31	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 March 2026 Next »
Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	31	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:

< March 2026 >
Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	31	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:

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

---

Event Handling

Track selection changes and month navigation, matching the Web Forms SelectionChanged and VisibleMonthChanged events:

< March 2026 >
Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	31	1	2	3	4
5	6	7	8	9	10	11

Selected: 03/02/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++;
}