# Calendar
## Description
BitCalendar is a fully-featured inline calendar for browsing and selecting a single date, or a date and time when the built-in time picker is enabled. It offers day, month and year grids, day events with details, and flexible day/week rules such as disabled and highlighted dates, a custom first day of week and week numbers. It works with any culture and time zone, including right-to-left and non-Gregorian calendars, and every grid follows the WAI-ARIA grid pattern for the keyboard.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AllowDeselect | `bool` | false | Whether selecting the already selected day deselects it, clearing the value. The calendar stays on the month the day was deselected in. |
| Classes | `BitCalendarClassStyles` | null | Custom CSS classes for different parts of the BitCalendar. |
| Color | `BitColor?` | null | The general color of the calendar that applies to the today day button, the highlighted current month, the selected AM/PM button, and the event indicators. |
| ContinuousSpinDelay | `int` | 400 | The delay in milliseconds before the hour/minute starts changing continuously while an increase/decrease button of the time picker is held down. |
| ContinuousSpinInterval | `int` | 75 | The interval in milliseconds between two consecutive changes while an increase/decrease button of the time picker is held down. |
| Culture | `CultureInfo` | System.Globalization.CultureInfo.CurrentUICulture | CultureInfo for the Calendar. |
| DateFormat | `string?` | null | The format of the date in the Calendar. |
| DayCellTemplate | `RenderFragment<DateTimeOffset>?` | null | Used to customize how content inside the day cell is rendered. |
| DisableFuture | `bool` | false | Disables every day after today, exactly as a MaxDate of now would. When both are set, the earlier of the two bounds wins. Today stays selectable, and a time picker on screen is held to the hours of it up to this very minute. |
| DisablePast | `bool` | false | Disables every day before today, exactly as a MinDate of now would. When both are set, the later of the two bounds wins. Today stays selectable, and a time picker on screen is held to the hours of it from this very minute on. |
| DisabledDates | `IEnumerable<DateTimeOffset>?` | null | The list of dates that are disabled (not selectable) in the calendar, in addition to MinDate and MaxDate. |
| DisabledDaysOfWeek | `IEnumerable<DayOfWeek>?` | null | The days of the week that are disabled (not selectable) in the calendar (e.g. weekends). |
| Events | `IEnumerable<BitCalendarEvent>?` | null | The list of events to display on calendar days. Days with events show an indicator dot that reveals a tooltip on hover and a details dialog on click. The events of a day are ordered the way an agenda of it is: the all-day ones first, then the rest by the time they start at. |
| EventDetailsCloseButtonTitle | `string` | Close | The title (tooltip) and the accessible name of the close button of the event details dialog. |
| EventTemplate | `RenderFragment<BitCalendarEvent>?` | null | Used to customize how an event is rendered in the details dialog, in place of its title, its time and its body - the place for a link to whatever the event stands for in the application. |
| EventTimeFromText | `string` | From | The text shown before the start time of an event when only a start time is present (e.g. "From 09:00"). Supports localization. |
| EventTimeUntilText | `string` | Until | The text shown before the end time of an event when only an end time is present (e.g. "Until 17:00"). Supports localization. |
| FirstDayOfWeek | `DayOfWeek?` | null | Overrides the first day of the week in the day picker. If not set, the first day of the week of the Culture is used. |
| FixedWeeks | `bool` | false | Whether the day picker should always render six weeks, filling the extra rows with the days of the adjacent months, to keep the calendar height fixed while navigating between months. It is always on when MonthCount renders more than one month, so the months keep an even height next to each other. |
| FooterTemplate | `RenderFragment?` | null | Rendered under the pickers, inside the root of the calendar: the place for the actions a calendar is often given of its own, such as a Clear button or a summary of the selection. |
| GetDayClass | `Func<DateTimeOffset, string?>?` | null | Custom function to provide additional CSS classes for each day button of the calendar. |
| GoToNextMonthTitle | `string` | Go to next month | The title of the Go to next month button (tooltip). |
| GoToNextYearRangeTitle | `string` | Next year range {0} - {1} | The title of the Go to next year range button (tooltip). |
| GoToNextYearTitle | `string` | Go to next year {0} | The title of the Go to next year button (tooltip). |
| NowButtonIcon | `BitIconInfo?` | null | Gets or sets the icon to display in the now button using custom CSS classes for external icon libraries. Takes precedence over NowButtonIconName when both are set. |
| NowButtonIconName | `string?` | null | Gets or sets the name of the icon to display in the now button from the built-in Fluent UI icons. |
| NowButtonTitle | `string` | Go to now | The title of the now button (tooltip). |
| GoToPrevMonthTitle | `string` | Go to previous month | The title of the Go to previous month button (tooltip). |
| GoToPrevYearRangeTitle | `string` | Previous year range {0} - {1} | The title of the Go to previous year range button (tooltip). |
| GoToPrevYearTitle | `string` | Go to previous year {0} | The title of the Go to previous year button (tooltip). |
| GoToTodayIcon | `BitIconInfo?` | null | Gets or sets the icon to display in the GoToToday button using custom CSS classes for external icon libraries. Takes precedence over GoToTodayIconName when both are set. |
| GoToTodayIconName | `string?` | null | Gets or sets the name of the icon to display in the GoToToday button from the built-in Fluent UI icons. |
| GoToTodayTitle | `string` | Go to today | The title of the GoToToday button (tooltip). |
| HeaderTemplate | `RenderFragment?` | null | Rendered above the pickers, inside the root of the calendar: the place for a caption or a legend of its own, before the day, month and year grids. |
| HideTimePickerIcon | `BitIconInfo?` | null | Gets or sets the icon to display in the HideTimePicker button using custom CSS classes for external icon libraries. Takes precedence over HideTimePickerIconName when both are set. |
| HideTimePickerIconName | `string?` | null | Gets or sets the name of the icon to display in the HideTimePicker button from the built-in Fluent UI icons. |
| HideTimePickerTitle | `string` | Hide time picker | The title of the HideTimePicker button (tooltip). |
| HighlightCurrentMonth | `bool` | false | Whether the month picker should highlight the current month. |
| HighlightedDates | `IEnumerable<DateTimeOffset>?` | null | The list of dates that are highlighted (marked) in the day picker. |
| HighlightSelectedMonth | `bool` | false | Whether the month picker should highlight the selected month. |
| HighlightToday | `bool` | true | Whether the day picker should highlight today's day. It only affects the visual style of the day cell; the accessibility attributes still report the day as the current date. |
| HourStep | `int` | 1 | The step, in hours, the spin buttons move the hour by. A step greater than 1 lays a grid over the day, starting at midnight, that every hour the picker produces sits on. The buttons, the keys and what is typed into the hour are all held to it. |
| InvalidErrorMessage | `string?` | null | The custom validation error message for the invalid value. |
| IsDateDisabled | `Func<DateTimeOffset, bool>?` | null | Custom function to determine if a specific date is disabled (not selectable) in the calendar. |
| MaxDate | `DateTimeOffset?` | null | The maximum allowable date of the calendar. The days after it are ruled out as a whole, and the day it itself falls on stays selectable; where a time picker is on screen, the time the bound carries bounds the hours of that day too. |
| MinDate | `DateTimeOffset?` | null | The minimum allowable date of the calendar. The days before it are ruled out as a whole, and the day it itself falls on stays selectable; where a time picker is on screen, the time the bound carries bounds the hours of that day too. |
| MinuteStep | `int` | 1 | The step, in minutes, the spin buttons move the minute by. A step greater than 1 lays a grid over the hour, starting at the top of it, that every minute the picker produces sits on - which is what turns it into a five-minute or quarter-hour picker. The buttons, the keys and what is typed into the minute are all held to it. |
| MonthCellTemplate | `RenderFragment<DateTimeOffset>?` | null | Used to customize how content inside the month cell is rendered. |
| MonthCount | `int` | 1 | The number of consecutive months rendered side by side in the day picker (1 to 3), which turns the calendar into a view of a whole season - the arrow keys, the selection and the events carry on across the months of it. More than one month always renders six week rows and never the days of the adjacent months, and the months stack instead of overflowing when the width they are given cannot fit them. |
| MonthPickerToggleTitle | `string` | {0}, change month | The title of the month picker's toggle (tooltip). |
| NextMonthNavIcon | `BitIconInfo?` | null | Gets or sets the icon to display in the Go to next month button using custom CSS classes for external icon libraries. Takes precedence over NextMonthNavIconName when both are set. |
| NextMonthNavIconName | `string?` | null | Gets or sets the name of the icon to display in the Go to next month button from the built-in Fluent UI icons. |
| NextYearNavIcon | `BitIconInfo?` | null | Gets or sets the icon to display in the Go to next year button using custom CSS classes for external icon libraries. Takes precedence over NextYearNavIconName when both are set. |
| NextYearNavIconName | `string?` | null | Gets or sets the name of the icon to display in the Go to next year button from the built-in Fluent UI icons. |
| NextYearRangeNavIcon | `BitIconInfo?` | null | Gets or sets the icon to display in the Go to next year range button using custom CSS classes for external icon libraries. Takes precedence over NextYearRangeNavIconName when both are set. |
| NextYearRangeNavIconName | `string?` | null | Gets or sets the name of the icon to display in the Go to next year range button from the built-in Fluent UI icons. |
| OnMonthChange | `EventCallback<DateTimeOffset>` | | Callback for when the displayed month of the day picker changes. The argument is the first day of the newly displayed month. |
| OnSelectDate | `EventCallback<DateTimeOffset?>` | | Callback for when the user selects a date. |
| PagedNavigation | `bool` | false | Whether the previous and next navigation buttons move the calendar by all of its rendered months instead of one, so consecutive pages of a multi-month calendar never overlap. It has no effect when MonthCount renders a single month. |
| PrevMonthNavIcon | `BitIconInfo?` | null | Gets or sets the icon to display in the Go to previous month button using custom CSS classes for external icon libraries. Takes precedence over PrevMonthNavIconName when both are set. |
| PrevMonthNavIconName | `string?` | null | Gets or sets the name of the icon to display in the Go to previous month button from the built-in Fluent UI icons. |
| PrevYearNavIcon | `BitIconInfo?` | null | Gets or sets the icon to display in the Go to previous year button using custom CSS classes for external icon libraries. Takes precedence over PrevYearNavIconName when both are set. |
| PrevYearNavIconName | `string?` | null | Gets or sets the name of the icon to display in the Go to previous year button from the built-in Fluent UI icons. |
| PrevYearRangeNavIcon | `BitIconInfo?` | null | Gets or sets the icon to display in the Go to previous year range button using custom CSS classes for external icon libraries. Takes precedence over PrevYearRangeNavIconName when both are set. |
| PrevYearRangeNavIconName | `string?` | null | Gets or sets the name of the icon to display in the Go to previous year range button from the built-in Fluent UI icons. |
| SelectedDateAriaAtomic | `string` | Selected date {0} | The template of the text a screen reader is given when the selection changes, where {0} is the selected date written with the DateFormat. Nothing is announced while no date is selected. |
| ShowEventDetails | `bool` | true | Whether clicking a day that carries events opens the modal dialog listing them. The day is selected either way; turning this off leaves the events to the indicator, the tooltip and whatever the page itself shows for the selected day. |
| ShowNowButton | `bool` | true | Whether the now button should be shown or not. |
| ShowGoToToday | `bool` | true | Whether the GoToToday button should be shown or not. |
| ShowMonthPicker | `bool` | true | Whether the month picker is shown or hidden. |
| ShowMonthPickerAsOverlay | `bool` | false | Show month picker on top of date picker when visible. |
| ShowOutsideDays | `bool` | true | Whether the days of the previous and next months should be shown in the day picker. It has no effect when MonthCount renders more than one month, since those days would then show up in two grids at once. |
| ShowTimePicker | `bool` | false | Whether the time picker should be shown or not. |
| ShowTimePickerAsOverlay | `bool` | false | Show time picker on top of date picker when visible. |
| ShowTimePickerIcon | `BitIconInfo?` | null | Gets or sets the icon to display in the ShowTimePicker button using custom CSS classes for external icon libraries. Takes precedence over ShowTimePickerIconName when both are set. |
| ShowTimePickerIconName | `string?` | null | Gets or sets the name of the icon to display in the ShowTimePicker button from the built-in Fluent UI icons. |
| ShowTimePickerTitle | `string` | Show time picker | The title of the ShowTimePicker button (tooltip). |
| ShowWeekNumbers | `bool` | false | Whether the week number (weeks 1 to 53) should be shown before each week row. |
| Size | `BitSize?` | null | The size of the calendar, which scales its cells and their text. |
| StartingValue | `DateTimeOffset?` | null | Specifies the date and time of the calendar when it is showing without any selected value. |
| Styles | `BitCalendarClassStyles` | null | Custom CSS styles for different parts of the BitCalendar. |
| TimeFormat | `BitTimeFormat` | BitTimeFormat.TwentyFourHours | The time format of the time-picker, 24H or 12H. |
| TimePickerDecreaseHourIcon | `BitIconInfo?` | null | Gets or sets the icon to display in the decrease-hour button using custom CSS classes for external icon libraries. Takes precedence over TimePickerDecreaseHourIconName when both are set. |
| TimePickerDecreaseHourIconName | `string?` | null | Gets or sets the name of the icon to display in the decrease-hour button from the built-in Fluent UI icons. |
| TimePickerDecreaseMinuteIcon | `BitIconInfo?` | null | Gets or sets the icon to display in the decrease-minute button using custom CSS classes for external icon libraries. Takes precedence over TimePickerDecreaseMinuteIconName when both are set. |
| TimePickerDecreaseMinuteIconName | `string?` | null | Gets or sets the name of the icon to display in the decrease-minute button from the built-in Fluent UI icons. |
| TimePickerIncreaseHourIcon | `BitIconInfo?` | null | Gets or sets the icon to display in the increase-hour button using custom CSS classes for external icon libraries. Takes precedence over TimePickerIncreaseHourIconName when both are set. |
| TimePickerIncreaseHourIconName | `string?` | null | Gets or sets the name of the icon to display in the increase-hour button from the built-in Fluent UI icons. |
| TimePickerIncreaseMinuteIcon | `BitIconInfo?` | null | Gets or sets the icon to display in the increase-minute button using custom CSS classes for external icon libraries. Takes precedence over TimePickerIncreaseMinuteIconName when both are set. |
| TimePickerIncreaseMinuteIconName | `string?` | null | Gets or sets the name of the icon to display in the increase-minute button from the built-in Fluent UI icons. |
| TimePickerDecreaseHourTitle | `string` | Decrease hour | The title (tooltip) and the accessible name of the time-picker's decrease-hour button. |
| TimePickerDecreaseMinuteTitle | `string` | Decrease minute | The title (tooltip) and the accessible name of the time-picker's decrease-minute button. |
| TimePickerHourTitle | `string` | Hour | The title (tooltip) and the accessible name of the time-picker's hour input. |
| TimePickerIncreaseHourTitle | `string` | Increase hour | The title (tooltip) and the accessible name of the time-picker's increase-hour button. |
| TimePickerIncreaseMinuteTitle | `string` | Increase minute | The title (tooltip) and the accessible name of the time-picker's increase-minute button. |
| TimePickerMinuteTitle | `string` | Minute | The title (tooltip) and the accessible name of the time-picker's minute input. |
| TimeZone | `TimeZoneInfo?` | null | TimeZone for the BitCalendar. |
| Today | `DateTimeOffset?` | null | Overrides the current date and time considered as "today" and "now" in the calendar (useful for testing or custom time providers). |
| WeekNumberRule | `CalendarWeekRule?` | null | The rule used to calculate the week numbers. Defaults to the FirstFullWeek rule. |
| WeekNumbersHeaderTitle | `string` | Week | The accessible name of the empty column header above the week numbers. |
| WeekNumberTitle | `string` | Week number {0} | The title of the week number (tooltip). |
| YearCellTemplate | `RenderFragment<int>?` | null | Used to customize how content inside the year cell is rendered. |
| YearPickerToggleTitle | `string` | {0}, change year | The title of the year picker's toggle (tooltip). |
| YearRangePickerToggleTitle | `string` | {0} - {1}, change month | The title of the year range picker's toggle (tooltip). |
| DefaultValue | `TValue?` | null | The default value of the input to be used in uncontrolled mode (i.e. when the Value is not bound), typically used alongside the OnChange callback. |
| DisplayName | `string?` | null | Gets or sets the display name for this field. |
| InputHtmlAttributes | `IReadOnlyDictionary<string, object>?` | null | Gets or sets a collection of additional attributes that will be applied to the created element. |
| Name | `string?` | null | Gets or sets the name of the element. Allows access by name from the associated form. |
| NoValidate | `bool` | false | Disables the validation of the input. |
| OnChange | `EventCallback<TValue?>` | | Callback for when the input value changes. |
| ReadOnly | `bool` | false | Makes the input read-only. |
| Required | `bool` | false | Makes the input required. |
| Value | `TValue?` | null | Gets or sets the value of the input. This should be used with two-way binding. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| FocusAsync | `ValueTask` | | Gives focus to the calendar: the day of the day grid that is in the tab sequence, or the month, the year or the hour input when the day grid is not the picker on screen. |
| InputElement | `ElementReference` | | The ElementReference of the input element. |
| FocusAsync() | `() => ValueTask` | | Gives focus to the input element. |
| FocusAsync(bool preventScroll) | `(bool preventScroll) => ValueTask` | | Gives focus to the input element. |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitColor Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | Show content of the component. |
| Hidden | 1 | Hide content of the component,though the space it takes on the page remains. |
| Collapsed | 2 | Hide content of the component,though the space it takes on the page gone. |
### BitTimeFormat Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| TwentyFourHours | 0 | Show time pickers in 24 hours format. |
| TwelveHours | 1 | Show time pickers in 12 hours format. |
### BitSize Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Small | 0 | The small size calendar. |
| Medium | 1 | The medium size calendar. |
| Large | 2 | The large size calendar. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitCalendarClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitCalendar. |
| Container | `string?` | null | Custom CSS classes/styles for the main container of the BitCalendar. |
| Header | `string?` | null | Custom CSS classes/styles for the wrapper of the HeaderTemplate of the BitCalendar. |
| Footer | `string?` | null | Custom CSS classes/styles for the wrapper of the FooterTemplate of the BitCalendar. |
| DayPickerWrapper | `string?` | null | Custom CSS classes/styles for the day-picker's wrapper of the BitCalendar. |
| DayPickerHeader | `string?` | null | Custom CSS classes/styles for the day-picker's header of the BitCalendar. |
| DayPickerMonth | `string?` | null | Custom CSS classes/styles for the day-picker's month of the BitCalendar. |
| DayPickerNavWrapper | `string?` | null | Custom CSS classes/styles for the wrapper of the day-picker's nav buttons of the BitCalendar. |
| PrevMonthNavButton | `string?` | null | Custom CSS classes/styles for the Go to previous month button of the BitCalendar. |
| PrevMonthNavIcon | `string?` | null | Custom CSS classes/styles for the Go to previous month icon of the BitCalendar. |
| GoToTodayButton | `string?` | null | Custom CSS classes/styles for the Go to today button of the BitCalendar. |
| GoToTodayIcon | `string?` | null | Custom CSS classes/styles for the Go to today icon of the BitCalendar. |
| NowButton | `string?` | null | Custom CSS classes/styles for the Go to now button of the BitCalendar. |
| NowButtonIcon | `string?` | null | Custom CSS classes/styles for the Go to now icon of the BitCalendar. |
| HideTimePickerButton | `string?` | null | Custom CSS classes/styles for the hide time-picker button of the BitCalendar. |
| HideTimePickerIcon | `string?` | null | Custom CSS classes/styles for the hide time-picker icon of the BitCalendar. |
| NextMonthNavButton | `string?` | null | Custom CSS classes/styles for the Go to next month button of the BitCalendar. |
| NextMonthNavIcon | `string?` | null | Custom CSS classes/styles for the Go to next month icon of the BitCalendar. |
| DaysGrid | `string?` | null | Custom CSS classes/styles for the days' grid of the BitCalendar. |
| DaysHeaderRow | `string?` | null | Custom CSS classes/styles for the header row of the days of the BitCalendar. |
| WeekNumbersHeader | `string?` | null | Custom CSS classes/styles for the header of the week numbers of the BitCalendar. |
| DayNameHeader | `string?` | null | Custom CSS classes/styles for the weekday-name headers of the BitCalendar. |
| DaysRow | `string?` | null | Custom CSS classes/styles for each row of the days of the BitCalendar. |
| WeekNumber | `string?` | null | Custom CSS classes/styles for the week number of the BitCalendar. |
| DayButton | `string?` | null | Custom CSS classes/styles for each day button of the BitCalendar. |
| TodayDayButton | `string?` | null | Custom CSS classes/styles for today day button of the BitCalendar. |
| SelectedDayButton | `string?` | null | Custom CSS classes/styles for selected day button of the BitCalendar. |
| HighlightedDayButton | `string?` | null | Custom CSS classes/styles for highlighted day buttons of the BitCalendar. |
| TimeInputContainer | `string?` | null | Custom CSS classes/styles for the time-picker's input container of the BitCalendar. |
| HourInputContainer | `string?` | null | Custom CSS classes/styles for the time-picker's hour input container of the BitCalendar. |
| MinuteInputContainer | `string?` | null | Custom CSS classes/styles for the time-picker's minute input container of the BitCalendar. |
| TimePickerWrapper | `string?` | null | Custom CSS classes/styles for the time-picker's wrapper of the BitCalendar. |
| TimePickerHourInput | `string?` | null | Custom CSS classes/styles for the time-picker's hour input of the BitCalendar. |
| TimePickerHourMinuteSeparator | `string?` | null | Custom CSS classes/styles for the time-picker's hour/minute separator of the BitCalendar. |
| TimePickerMinuteInput | `string?` | null | Custom CSS classes/styles for the time-picker's minute input of the BitCalendar. |
| TimePickerIncreaseHourButton | `string?` | null | Custom CSS classes/styles for the time-picker's increase hour button of the BitCalendar. |
| TimePickerIncreaseHourIcon | `string?` | null | Custom CSS classes/styles for the time-picker's increase hour icon of the BitCalendar. |
| TimePickerDecreaseHourButton | `string?` | null | Custom CSS classes/styles for the time-picker's decrease hour button of the BitCalendar. |
| TimePickerDecreaseHourIcon | `string?` | null | Custom CSS classes/styles for the time-picker's decrease hour icon of the BitCalendar. |
| TimePickerIncreaseMinuteButton | `string?` | null | Custom CSS classes/styles for the time-picker's increase minute button of the BitCalendar. |
| TimePickerIncreaseMinuteIcon | `string?` | null | Custom CSS classes/styles for the time-picker's increase minute icon of the BitCalendar. |
| TimePickerDecreaseMinuteButton | `string?` | null | Custom CSS classes/styles for the time-picker's decrease minute button of the BitCalendar. |
| TimePickerDecreaseMinuteIcon | `string?` | null | Custom CSS classes/styles for the time-picker's decrease minute icon of the BitCalendar. |
| TimePickerAmPmContainer | `string?` | null | Custom CSS classes/styles for the time-picker's Am Pm container of the BitCalendar. |
| TimePickerAmButton | `string?` | null | Custom CSS classes/styles for the time-picker's Am button of the BitCalendar. |
| TimePickerPmButton | `string?` | null | Custom CSS classes/styles for the time-picker's Pm button of the BitCalendar. |
| Divider | `string?` | null | Custom CSS classes/styles for the main divider of the BitCalendar. |
| YearMonthPickerWrapper | `string?` | null | Custom CSS classes/styles for the year-month-picker's wrapper of the BitCalendar. |
| MonthPickerHeader | `string?` | null | Custom CSS classes/styles for the month-picker's header of the BitCalendar. |
| TimePickerHeader | `string?` | null | Custom CSS classes/styles for the time-picker's header of the BitCalendar. |
| YearPickerToggleButton | `string?` | null | Custom CSS classes/styles for the year-picker's toggle button of the BitCalendar. |
| ShowTimePickerButton | `string?` | null | Custom CSS classes/styles for the show time-picker button of the BitCalendar. |
| ShowTimePickerIcon | `string?` | null | Custom CSS classes/styles for the show time-picker icon of the BitCalendar. |
| MonthPickerNavWrapper | `string?` | null | Custom CSS classes/styles for the wrapper of the month-picker's nav buttons of the BitCalendar. |
| TimePickerNavWrapper | `string?` | null | Custom CSS classes/styles for the wrapper of the time-picker's nav buttons of the BitCalendar. |
| PrevYearNavButton | `string?` | null | Custom CSS classes/styles for the Go to previous year button of the BitCalendar. |
| PrevYearNavIcon | `string?` | null | Custom CSS classes/styles for the Go to previous year icon of the BitCalendar. |
| NextYearNavButton | `string?` | null | Custom CSS classes/styles for the Go to next year button of the BitCalendar. |
| NextYearNavIcon | `string?` | null | Custom CSS classes/styles for the Go to next year icon of the BitCalendar. |
| MonthsRow | `string?` | null | Custom CSS classes/styles for each row of the months of the BitCalendar. |
| MonthButton | `string?` | null | Custom CSS classes/styles for each month button of the BitCalendar. |
| YearPickerHeader | `string?` | null | Custom CSS classes/styles for the year-picker's header of the BitCalendar. |
| MonthPickerToggleButton | `string?` | null | Custom CSS classes/styles for the month-picker's toggle button of the BitCalendar. |
| YearPickerNavWrapper | `string?` | null | Custom CSS classes/styles for the wrapper of the year-picker nav buttons of the BitCalendar. |
| PrevYearRangeNavButton | `string?` | null | Custom CSS classes/styles for the Go to previous year-range button of the BitCalendar. |
| PrevYearRangeNavIcon | `string?` | null | Custom CSS classes/styles for the Go to previous year-range icon of the BitCalendar. |
| NextYearRangeNavButton | `string?` | null | Custom CSS classes/styles for the Go to next year-range button of the BitCalendar. |
| NextYearRangeNavIcon | `string?` | null | Custom CSS classes/styles for the Go to next year-range icon of the BitCalendar. |
| YearsRow | `string?` | null | Custom CSS classes/styles for each row of the years of the BitCalendar. |
| YearButton | `string?` | null | Custom CSS classes/styles for each year button of the BitCalendar. |
| EventIndicators | `string?` | null | Custom CSS classes/styles for the row of event indicator dots on a day of the BitCalendar. |
| EventIndicator | `string?` | null | Custom CSS classes/styles for each event indicator dot of the BitCalendar. |
| EventModalOverlay | `string?` | null | Custom CSS classes/styles for the event modal overlay of the BitCalendar. |
| EventModalContainer | `string?` | null | Custom CSS classes/styles for the event modal container of the BitCalendar. |
| EventModalHeader | `string?` | null | Custom CSS classes/styles for the event modal header of the BitCalendar. |
| EventModalCloseButton | `string?` | null | Custom CSS classes/styles for the event modal close button of the BitCalendar. |
| EventList | `string?` | null | Custom CSS classes/styles for the list of events in the event modal of the BitCalendar. |
| EventItem | `string?` | null | Custom CSS classes/styles for each event item in the event modal of the BitCalendar. |
| EventItemTitle | `string?` | null | Custom CSS classes/styles for the event item title in the event modal of the BitCalendar. |
| EventItemTime | `string?` | null | Custom CSS classes/styles for the event item time range in the event modal of the BitCalendar. |
| EventItemBody | `string?` | null | Custom CSS classes/styles for the event item body in the event modal of the BitCalendar. |
### BitCalendarEvent Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Title | `string` | | The title of the event. |
| Body | `string` | | The full body/description text of the event. |
| Date | `DateOnly` | default | The date on which the event occurs. |
| Color | `BitColor?` | null | The color of the indicator dot the event puts on its day. Without one the dot takes the color of the calendar itself. |
| StartTime | `TimeOnly?` | null | The optional start time of the event. |
| EndTime | `TimeOnly?` | null | The optional end time of the event. |
### BitIconInfo Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Name | `string?` | null | Gets or sets the name of the icon. |
| BaseClass | `string?` | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | `string?` | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance.
| Name | Default Value | Description |
| :--- | :------------ | :---------- |
| `--bit-Calendar-background` | transparent | Background behind the whole calendar, including the area around the pickers. |
| `--bit-Calendar-radius` | --bit-shp-radius-control | Corner radius of the calendar, which the overlay of the event details dialog follows. |
| `--bit-Calendar-padding` | 8px * 1.5 (the spacing unit) | Padding of each picker pane - the day grid, the month and year grids, the time picker - and of the HeaderTemplate and FooterTemplate wrappers. |
| `--bit-Calendar-color` | --bit-clr-fg-pri | Text color of the cells, the headers and the navigation buttons. The selected day, today and a disabled cell paint their own through the variables below. |
| `--bit-Calendar-divider-color` | --bit-clr-brd-sec | Color of the rule between the panes, of the one beside the week numbers, and of the borders inside the event details dialog. |
| `--bit-Calendar-focus-color` | The Color role's focus color (--bit-clr-err-focus while the value is invalid) | Color of the keyboard focus ring drawn around every cell and button of the calendar. |
| `--bit-Calendar-disabled-color` | --bit-clr-fg-dis | Text color of a disabled cell, and of every part of a calendar whose IsEnabled is false. |
| `--bit-Calendar-hover-background` | --bit-clr-bg-pri-hover | Background of a cell or button on hover (pointer devices only). |
| `--bit-Calendar-active-background` | --bit-clr-bg-pri-active | Background of a cell or button while pressed. |
| `--bit-Calendar-day-size` | Per Size: 24px / 28px / 34px at the Fluent defaults | Width and height of a day cell. The week numbers, the weekday headers, the empty cells and the navigation buttons all take it, so the whole day grid stays in step. |
| `--bit-Calendar-day-font-size` | Per Size: --bit-tpg-fs-xs / -sm / -md | Text size of the day cells and of the headers and week numbers that line up with them. |
| `--bit-Calendar-day-radius` | --bit-shp-radius-control | Corner radius of a day cell, which the month, year, navigation and time-picker buttons share. Set it to 999px for round days. |
| `--bit-Calendar-outside-day-color` | --bit-clr-fg-sec | Text color of a day of the previous or next month while ShowOutsideDays is on. |
| `--bit-Calendar-selected-background` | --bit-clr-bg-sec | Background of the selected day, and of the displayed month while HighlightSelectedMonth is on. |
| `--bit-Calendar-selected-color` | --bit-Calendar-color | Text color of the selected day, for a filled selection that needs its own contrast. |
| `--bit-Calendar-selected-border-color` | --bit-clr-brd-pri | Color of the ring drawn around the selected day. Set it to transparent for a selection carried by its background alone. |
| `--bit-Calendar-today-background` | The Color role's main color | Background of today, of the current month while HighlightCurrentMonth is on, and of the AM/PM button that is in force. |
| `--bit-Calendar-today-color` | The Color role's on-color | Text color of today, of the highlighted current month and of the AM/PM button that is in force. |
| `--bit-Calendar-today-hover-background` | The Color role's hover color | Background of today on hover (pointer devices only), which the highlighted current month and the AM/PM button that is in force share. Set it alongside --bit-Calendar-today-background so the hover does not fall back to the Color role. |
| `--bit-Calendar-today-active-background` | The Color role's active color | Background of today while pressed, which the AM/PM button that is in force shares. |
| `--bit-Calendar-today-radius` | --bit-shp-radius-full | Corner radius of today, which is a circle by default. |
| `--bit-Calendar-highlighted-background` | --bit-clr-bg-ter | Background of a day listed in HighlightedDates. |
| `--bit-Calendar-week-number-color` | --bit-clr-fg-sec | Text color of a week number. |
| `--bit-Calendar-week-number-background` | --bit-clr-bg-sec | Background of the week-number column. |
| `--bit-Calendar-event-color` | The Color role's main color | Color of an indicator dot whose event named no Color of its own. On today it falls to the on-color instead, which is what reads against the cell. |
| `--bit-Calendar-event-size` | 8px * 0.5 (the spacing unit) | Diameter of each indicator dot on a day that carries events. |
| `--bit-Calendar-event-gap` | 8px * 0.25 (the spacing unit) | Space between the dots of a day that carries more than one event. |
## Examples
\n**Basic**:
```razor
@context.Title
Open
calendarEvents =
[
new() { Title = "Team standup",
Body = "Daily sync with the engineering team.",
Date = DateOnly.FromDateTime(DateTime.Today),
StartTime = new TimeOnly(9, 0),
EndTime = new TimeOnly(9, 30) },
new() { Title = "Product review",
Body = "Quarterly product review - prepare slides beforehand.",
Date = DateOnly.FromDateTime(DateTime.Today),
StartTime = new TimeOnly(14, 0),
EndTime = new TimeOnly(15, 0) },
new() { Title = "All-day workshop",
Body = "Full-day frontend architecture workshop.",
Date = DateOnly.FromDateTime(DateTime.Today.AddDays(3)) },
new() { Title = "Retro",
Body = "Sprint retrospective.",
Date = DateOnly.FromDateTime(DateTime.Today.AddDays(3)),
StartTime = new TimeOnly(16, 0),
EndTime = new TimeOnly(17, 0) },
new() { Title = "Client call",
Body = "Introductory call with the new client.",
Date = DateOnly.FromDateTime(DateTime.Today.AddDays(7)),
StartTime = new TimeOnly(11, 30) }
];
private List coloredEvents =
[
new() { Title = "Release 2.4",
Body = "Ship the release once the pipeline is green.",
Color = BitColor.Success,
Date = DateOnly.FromDateTime(DateTime.Today.AddDays(1)) },
new() { Title = "On-call handover",
Color = BitColor.Warning,
Date = DateOnly.FromDateTime(DateTime.Today.AddDays(1)),
StartTime = new TimeOnly(10, 0) },
new() { Title = "Incident review",
Color = BitColor.Error,
Date = DateOnly.FromDateTime(DateTime.Today.AddDays(1)),
StartTime = new TimeOnly(15, 0),
EndTime = new TimeOnly(16, 0) },
new() { Title = "Design sync",
Color = BitColor.Info,
Date = DateOnly.FromDateTime(DateTime.Today.AddDays(4)),
StartTime = new TimeOnly(13, 0) }
];
private string eventsOfSelectedDay = "-";
private void HandleOnEventDayClick(DateTimeOffset? date)
{
if (date is null)
{
eventsOfSelectedDay = "-";
return;
}
var day = DateOnly.FromDateTime(date.Value.DateTime);
var titles = calendarEvents.Where(e => e.Date == day).Select(e => e.Title).ToArray();
eventsOfSelectedDay = titles.Length == 0 ? "none" : string.Join(", ", titles);
}
private string? openedEvent;
```
\n**Templates**:
```razor
@context.Day
@if (context.Day % 5 is 0)
{
}
@context
AC
Pick a delivery date
Today
Clear
Submit
Reset
@if (string.IsNullOrEmpty(SuccessMessage) is false)
{
@SuccessMessage
}
```
```csharp
public class BitCalendarValidationModel
{
[Required]
public DateTimeOffset? Date { get; set; }
}
private string SuccessMessage = string.Empty;
private BitCalendarValidationModel validationModel = new();
private async Task HandleValidSubmit()
{
SuccessMessage = "Form was submitted successfully!";
await Task.Delay(3000);
SuccessMessage = string.Empty;
StateHasChanged();
}
private void HandleInvalidSubmit()
{
SuccessMessage = string.Empty;
}
```
\n**Accessibility**:
```razor
calendarEvents =
[
new() { Title = "Team standup",
Body = "Daily sync with the engineering team.",
Date = DateOnly.FromDateTime(DateTime.Today),
StartTime = new TimeOnly(9, 0),
EndTime = new TimeOnly(9, 30) },
new() { Title = "Product review",
Body = "Quarterly product review - prepare slides beforehand.",
Date = DateOnly.FromDateTime(DateTime.Today),
StartTime = new TimeOnly(14, 0),
EndTime = new TimeOnly(15, 0) },
new() { Title = "All-day workshop",
Body = "Full-day frontend architecture workshop.",
Date = DateOnly.FromDateTime(DateTime.Today.AddDays(3)) },
new() { Title = "Retro",
Body = "Sprint retrospective.",
Date = DateOnly.FromDateTime(DateTime.Today.AddDays(3)),
StartTime = new TimeOnly(16, 0),
EndTime = new TimeOnly(17, 0) },
new() { Title = "Client call",
Body = "Introductory call with the new client.",
Date = DateOnly.FromDateTime(DateTime.Today.AddDays(7)),
StartTime = new TimeOnly(11, 30) }
];
```
\n**RTL**:
```razor
Selected date: @selectedDate.ToString()
Selected date: @(onSelectDate.HasValue ? onSelectDate.ToString() : "-")
Selected date: @(deselectableDate.HasValue ? deselectableDate.ToString() : "-")
```
```csharp
private DateTimeOffset? selectedDate = new DateTimeOffset(2023, 8, 19, 0, 0, 0, DateTimeOffset.Now.Offset);
private DateTimeOffset? deselectableDate = DateTimeOffset.Now;
private DateTimeOffset? onSelectDate;
private void HandleOnSelectDate(DateTimeOffset? date)
{
onSelectDate = date;
}
```
\n**Starting view**:
```razor
Displayed month: @(displayedMonth.HasValue ? displayedMonth.Value.ToString("MMMM yyyy") : "-")
```
```csharp
private DateTimeOffset? startingValue = new DateTimeOffset(2020, 12, 4, 20, 45, 0, DateTimeOffset.Now.Offset);
private DateTimeOffset? customToday = new DateTimeOffset(2021, 3, 15, 0, 0, 0, DateTimeOffset.Now.Offset);
private DateTimeOffset? displayedMonth;
private void HandleOnMonthChange(DateTimeOffset month)
{
displayedMonth = month;
}
```
\n**Min & Max**:
```razor
Selected: @selectedDateTime.ToString()
Selected: @boundedDateTime.ToString()
```
```csharp
private DateTimeOffset? selectedDateTime = DateTimeOffset.Now;
private DateTimeOffset? boundedDateTime = DateTime.Today.AddHours(12);
private DateTimeOffset boundedMinDate = DateTime.Today.AddHours(9).AddMinutes(30);
private DateTimeOffset boundedMaxDate = DateTime.Today.AddDays(2).AddHours(17);
```
\n**Events**:
```razor
Events of the selected day: @eventsOfSelectedDay
Opened: @(openedEvent ?? "-")
```
```csharp
private List
@culture.DateTimeFormat.GetAbbreviatedMonthName(context.Month)
Selected: @(footerDate.HasValue ? footerDate.Value.ToString("d") : "-")
```
```csharp
private CultureInfo culture = CultureInfo.CurrentUICulture;
private DateTimeOffset? footerDate;
```
\n**Culture**:
```razor
Selected date: @timeZoneDate1?.ToString()
@{
TimeZoneInfo? timeZoneInfo = null;
var allTimeZones = TimeZoneInfo.GetSystemTimeZones();
if (allTimeZones.Count > 0)
{
timeZoneInfo = allTimeZones[0];
}
}
@if (timeZoneInfo is not null) {
"@timeZoneInfo.Id":
Selected date: @timeZoneDate2?.ToString()
}
```
```csharp
private DateTimeOffset? timeZoneDate1;
private DateTimeOffset? timeZoneDate2;
```
\n**Validation**:
```razor
Selected: @(seasonDate.HasValue ? seasonDate.Value.ToString("d") : "-")