Calendar

The calendar renders a day grid with a month and year picker beside it. Disabled dims it and stops every interaction; ReadOnly keeps it browsable but stops the value from changing. ShowGoToToday hides the button that returns the view to the current month.

Bind the selected date with @bind-Value, or listen to OnSelectDate to react to each selection. AllowDeselect turns the selected day into a toggle, so clicking it again empties the value without moving the view off its month.

Without a value the calendar opens on today. StartingValue opens it somewhere else (and seeds the time picker further down this page), and Today overrides which day counts as today, for a custom time provider or a test. OnMonthChange reports the first day of the newly displayed month after every navigation, which is where the events of that month are usually loaded.

MinDate and MaxDate bound the selectable range: the days outside it are disabled and the month, year and year-range navigation stops at the edges. DisablePast and DisableFuture do the same against today without a bound to keep up to date; where both apply the narrower wins, and today stays selectable under either.

Beyond the bounds, single days can be ruled out with DisabledDates, whole weekdays with DisabledDaysOfWeek, and anything else with the IsDateDisabled predicate. A disabled day is not selectable and the arrow keys skip over it. HighlightedDates marks days without disabling them, and GetDayClass hands any day a class of your own.

FirstDayOfWeek overrides the day the week starts on, WeekNumberRule picks how ShowWeekNumbers counts the weeks (Monday plus FirstFourDayWeek is ISO 8601), ShowOutsideDays hides the days of the adjacent months, and FixedWeeks always renders six weeks so the height never changes while browsing.

ShowMonthPicker toggles the month and year grids, and ShowMonthPickerAsOverlay moves them on top of the day grid, reached from the month title. HighlightSelectedMonth marks the month that is displayed and HighlightCurrentMonth the current one - worth turning on, since otherwise the month grid shows no sign of where you are.

ShowTimePicker adds an hour and minute picker beside the day grid, or on top of it with ShowTimePickerAsOverlay. TimeFormat switches between the 24-hour and 12-hour clocks, ShowNowButton hides the button that jumps to the current time, and HourStep / MinuteStep lay a grid over the day and the hour that everything the picker produces lands on - the spin buttons, the arrow and page keys, and what is typed. A MinDate or MaxDate carrying a time of day bounds the hours of the very day it falls on, so the picker cannot produce an instant outside of them.

Events marks a day with one dot per event (up to three) and a tooltip, and clicking such a day opens a modal dialog listing the title, time and description of each of them, all-day first. An event can name its own Color; the rest take the calendar's. The dialog is dismissed with Escape or its close button and hands the keyboard back to the day it came from. ShowEventDetails false keeps the dots and the tooltip but leaves the day's events to the page, EventTemplate renders an event's row in the dialog itself, and EventTimeFromText / EventTimeUntilText localize the one-sided time rows.

DayCellTemplate, MonthCellTemplate and YearCellTemplate replace the content of a cell, while HeaderTemplate and FooterTemplate add markup of your own above and below the pickers - a caption, a legend, or the actions a calendar is often given.

The calendar reads the month and day names, the first day of the week, the date format, the AM/PM designators and the calendar system itself off its Culture, defaulting to the culture of the app. A non-Gregorian calendar (Persian, Hebrew - including its thirteen-month leap years) needs nothing else. See our CultureInfoHelper(opens in a new tab) for how such a culture is built.

TimeZone is the zone the days and the time picker are read and written in, defaulting to the local one. The available zone data differs between runtimes - it depends on the OS and on project settings such as InvariantTimezone (more info(opens in a new tab)).

Local (the default):

Selected date:

"Dateline Standard Time":

Selected date:

Inside an EditForm the calendar validates like any other input. A rejected value draws a rule around the control and turns its focus ring red, and the day grid reports aria-invalid along with aria-required for a Required field.

October 2026

S

M

T

W

T

F

S

27282930123

45678910

11121314151617

18192021222324

25262728293031

2026

JanFebMarApr

MayJunJulAug

SepOctNovDec

Submit

Reset

Every grid - days, months and years - follows the WAI-ARIA grid pattern: one cell is in the tab sequence and the arrow keys move the focus between the rest.

• ← / →: previous/next cell, mirrored in right-to-left
• ↑ / ↓: one row up/down - a week in the day grid, four cells in the others
• Home / End: first/last cell of the week, of the year, of the range
• PageUp / PageDown: previous/next month in the day grid, year in the month grid, year range in the year grid
• Shift+PageUp / Shift+PageDown: same day of the previous/next year
• Enter / Space: activate the focused cell
• Escape: leave the event details dialog, the year grid, or a picker laid over the day grid

In the time picker the arrow keys move the hour and the minute by one step of the grid and PageUp / PageDown do the same from anywhere in the field.

Crossing a month, year or range boundary navigates the calendar and keeps the focus on the cell, and disabled cells are skipped. Beyond that: AriaLabel names the whole calendar for a screen reader, each day is announced with its full date and its events, today and the current month and year carry aria-current="date", and every button - the arrows, the spin buttons, the AM/PM pair - has a name and a state of its own, all of them overridable through the *Title parameters.

MonthCount renders up to three consecutive months side by side, which browses a whole season at once - the arrow keys, the selection and the events carry on across them. Such a strip always draws six week rows, never draws the days of the adjacent months (each of them is a day of the pane beside it), and wraps onto the next line when it is given less width than it asks for. PagedNavigation makes the arrows move a whole page of months instead of one.

BitParams carries a BitCalendarParams down to every calendar under it, so a page that shows several of them sets the week rules, the bounds or the culture once instead of at every calendar in it. What it carries is a default and not an override: a calendar that sets a parameter for itself keeps its own value, and only what it left unset is filled in from the cascade - which is what lets one calendar step out of the section it is in without the section having to know about it. Every parameter of the component is on the params object, and each of them is filled in on its own, so a calendar can take the week layout from the cascade and the month picker from its own markup.

Color paints today, the highlighted current month, the event indicators and the AM/PM button that is in force.

Every icon of the calendar has an *Icon parameter taking a BitIconInfo from an external library (BitIconInfo.Fa(...), BitIconInfo.Bi(...), BitIconInfo.Css(...)), and an *IconName one taking a built-in Fluent icon. The Icon form wins when both are set.

FontAwesome icons:

Bootstrap icons (with ShowTimePicker):

Size scales the cells and their text together, so the whole calendar keeps its proportions. The smallest cell still clears the 24 px minimum pointer target.

Style and Class land on the root, while Styles and Classes reach every part of the calendar on its own - see BitCalendarClassStyles. Prefer Classes when your CSS owns states such as hover and focus, which inline styles cannot express.

Component's Style & Class:

Styles & Classes:

The calendar also reads a set of CSS variables off its root for what no parameter covers. They inherit, so a value on :root or any ancestor re-skins every calendar below it, and one on the Style of an instance re-skins that one alone.

CSS variables:

Dir Rtl mirrors the calendar, and the left and right arrow keys swap with it. A culture that reads right to left turns it on by itself.