Calendar
The calendar control lets people select and view a single date or a range of dates in their calendar. It’s made up of 3 separate views: the month view, year view, and decade view.
Usage
Basic
Basic Calendar configuration showcasing default usage, disabled state, week numbers, highlighted months, and time picker.
Basic Calendar:
Selected date
October 2024
S
M
T
W
T
F
S
Disabled:
Selected date
October 2024
S
M
T
W
T
F
S
Week numbers:
Selected date
October 2024
S
M
T
W
T
F
S
39
40
41
42
43
Highlight months:
Selected date
October 2024
S
M
T
W
T
F
S
StartingValue: December 2020, Time: 20:45:
Selected date
S
M
T
W
T
F
S
:
Min & Max
Demonstrates setting minimum and maximum selectable dates in the calendar.
Min: Now.AddDays(-5)
Max: Now.AddDays(+5)
Selected date
October 2024
S
M
T
W
T
F
S
Min: Now.AddMonths(-2)
Max: Now.AddMonths(+1)
Selected date
October 2024
S
M
T
W
T
F
S
Min: Now.AddYears(-5)
Max: Now.AddYears(+1)
Selected date
October 2024
S
M
T
W
T
F
S
Style & Class
Showcases custom styling and class usage for the calendar component.
Component's Style & Class:
Selected date
October 2024
S
M
T
W
T
F
S
Selected date
October 2024
S
M
T
W
T
F
S
Styles & Classes:
Selected date
S
M
T
W
T
F
S
:
Selected date
October 2024
S
M
T
W
T
F
S
Binding
Illustrates binding the selected date value to a variable.
Selected date 08/19/2023
August 2023
S
M
T
W
T
F
S
Selected date: 08/19/2023 00:00:00 +00:00
Culture
By default, BitCalendar picks the current culture. But you can provide your own instance of CultureInfo for any custom culture.
You also can use our CultureInfoHelper class or check its code to see how to create a custom culture.
You also can use our CultureInfoHelper class or check its code to see how to create a custom culture.
fa-IR culture with Farsi names:
Selected date
آبان 1403
ش
ی
د
س
چ
پ
ج
fa-IR culture with Fingilish names:
Selected date
Aban 1403
S
Y
D
S
C
P
J
Templates
Use custom templates for day cells, month cells, and year cells.
DayCellTemplate:
Selected date
October 2024
S
M
T
W
T
F
S
MonthCellTemplate:
Selected date
October 2024
S
M
T
W
T
F
S
YearCellTemplate:
Selected date
October 2024
S
M
T
W
T
F
S
MonthPicker
Demonstrates controlling the visibility and position of the month picker.
IsMonthPickerVisible:
Selected date
October 2024
S
M
T
W
T
F
S
ShowMonthPickerAsOverlay:
Selected date
October 2024
S
M
T
W
T
F
S
TimePicker
Demonstrates the time picker functionality integrated within the calendar component.
Selected date 10/22/2024
S
M
T
W
T
F
S
:
Selected DateTime: 10/22/2024 00:52:32 +00:00
Hour/Minute step
Customizes the step increments for hours and minutes in the time picker.
HourStep = 2:
Selected date
S
M
T
W
T
F
S
:
MinuteStep = 15:
Selected date
S
M
T
W
T
F
S
:
Validation
Demonstrates validation for BitCalendar within a form, including required fields and custom validation messages.
RTL
Use BitCalendar in right-to-left (RTL).
Selected date
October 2024
S
M
T
W
T
F
S
API
BitCalendar parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Classes | BitCalendarClassStyles | null | Custom CSS classes for different parts of the BitCalendar. |
| 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. |
| 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). |
| 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). |
| GoToTodayTitle | string | Go to today | The title of the GoToToday button (tooltip). |
| GoToNowTitle | string | Go to now | The title of the GoToNow button (tooltip). |
| HighlightCurrentMonth | bool | false | Whether the month picker should highlight the current month. |
| HighlightSelectedMonth | bool | false | Whether the month picker should highlight the selected month. |
| HideTimePickerTitle | string | Hide time picker | The title of the HideTimePicker button (tooltip). |
| InvalidErrorMessage | string? | null | The custom validation error message for the invalid value. |
| ShowMonthPicker | bool | true | Whether the month picker is shown or hidden. |
| MaxDate | DateTimeOffset | null | The maximum allowable date of the calendar. |
| MinDate | DateTimeOffset? | null | The minimum allowable date of the calendar. |
| MonthCellTemplate | RenderFragment<DateTimeOffset>? | null | Used to customize how content inside the month cell is rendered. |
| MonthPickerToggleTitle | string | {0}, change month | The title of the month picker's toggle (tooltip). |
| ShowMonthPickerAsOverlay | bool | false | Show month picker on top of date picker when visible. |
| OnSelectDate | EventCallback<DateTimeOffset?> | Callback for when the user selects a date. | |
| SelectedDateAriaAtomic | string | Selected date {0} | The text of selected date aria-atomic of the calendar. |
| ShowGoToToday | bool | true | Whether the GoToToday button should be shown or not. |
| ShowTimePicker | bool | false | Whether the time picker should be shown or not. |
| 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. |
| ShowGoToNow | bool | true | Whether the GoToNow button should be shown or not. |
| 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. |
| 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). |
| HourStep | int | 1 | Determines increment/decrement steps for calendar's hour. |
| MinuteStep | int | 1 | Determines increment/decrement steps for calendar's minute. |
BitInputBase parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| 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. |
| 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. |
BitInputBase public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| 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. |
BitComponentBase parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| AriaLabel | string? | null | The aria-label of the control for the benefit of screen readers. |
| Class | string? | null | Custom CSS class for the root element of the component. |
| Dir | BitDir? | null | Determines the component direction. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Capture and render additional attributes in addition to the component's parameters. |
| Id | string? | null | Custom id attribute for the root element. if null the UniqueId will be used instead. |
| IsEnabled | bool | true | Whether or not the component is enabled. |
| Style | string? | null | Custom CSS style for the root element of the component. |
| Visibility | BitVisibility | BitVisibility.Visible | Whether the component is visible, hidden or collapsed. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction. |
| RootElement | ElementReference | The ElementReference of the root element. |
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. |
| 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. |
| 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. |
| 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. |
| 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. |
| TimePickerContainer | string? | null | Custom CSS classes/styles for the time-picker's main 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. |
| 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. |
| YearPickerToggleButton | string? | null | Custom CSS classes/styles for the year-picker's toggle button of the BitCalendar. |
| MonthPickerNavWrapper | string? | null | Custom CSS classes/styles for the wrapper of the month-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. |
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. |
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. |
- On this page