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
Selected date
September 2023
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Disabled
Selected date
September 2023
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Week numbers
Selected date
September 2023
| S | M | T | W | T | F | S | |
|---|---|---|---|---|---|---|---|
| 35 | |||||||
| 36 | |||||||
| 37 | |||||||
| 38 | |||||||
| 39 |
Validation
Date format
Applications can customize how dates are formatted and parsed. Formatted dates can be ambiguous, so the control will avoid parsing the formatted strings of dates selected using the UI when text input is allowed.
In this example, we are formatting and parsing dates as dd=MM(yy).
Selected date 30=09(23)
September 2023
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Min & Max
When date boundaries are set (via MinDate and MaxDate params) the BitCalendar will not allow out-of-bounds dates to be picked or entered.
In the first example, the allowed dates are between 5 days after now and 5 days before now.
Selected date
September 2023
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
In the second example, the allowed dates are between 1 month after now and 2 months before now.
Selected date
September 2023
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
In the third example, the allowed dates are between 1 year after now and 5 years before now.
Selected date
September 2023
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Two-way binding
Selected date 01/17/2020
January 2020
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Localization
By default, BitCalendar picks the current culture. You can also provide your own instance of CultureInfo for any custom culture.
To see an example, visit the following link.
To see an example, visit the following link.
Selected date
مهر 1402
| ش | ی | د | س | چ | پ | ج |
|---|---|---|---|---|---|---|
Selected date
Mehr 1402
| S | Y | D | S | C | P | J |
|---|---|---|---|---|---|---|
Templates
In this sample, you can see how to implement a custom template for different parts of BitCalendar.
Selected date
September 2023
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Selected date
September 2023
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Month Position and Visibility
In this sample, you can change month picker position.
When you change its position to Overlay you can see month picker by tapping on BitCalendar's header.
When you change its position to Overlay you can see month picker by tapping on BitCalendar's header.
Selected date
September 2023
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
In this sample, you can fully hide or visible month picker.
Selected date
September 2023
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
With time
Selected date 09/30/2023
September 2023
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
:
Implementation
BitCalendar parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Culture | CultureInfo | CultureInfo.CurrentUICulture | CultureInfo for the Calendar. |
| DateFormat | string? | null | The format of the date in the Calendar like "yyyy/MM/dd". |
| DayCellTemplate | RenderFragment<DateTimeOffset>? | null | Used to customize how content inside the day cell is rendered. |
| GoToToday | string | Go to today | GoToToday text for the Calendar. |
| GoToPrevMonthTitle | string | Go to previous month | The title of the Go to previous month button. |
| GoToNextMonthTitle | string | Go to next month | The title of the Go to next month button. |
| HighlightCurrentMonth | bool | false | Whether the month picker should highlight the current month. |
| HighlightSelectedMonth | bool | false | Whether the month picker should highlight the selected month. |
| InvalidErrorMessage | string? | null | The custom validation error message for the invalid value. |
| IsMonthPickerVisible | bool | true | Whether the month picker is shown beside the day picker or hidden. |
| MaxDate | DateTimeOffset | null | The maximum allowable date. |
| MinDate | DateTimeOffset? | null | The minimum allowable date. |
| MonthCellTemplate | RenderFragment<DateTimeOffset>? | null | Used to customize how content inside the month cell is rendered. |
| MonthPickerPosition | BitCalendarMonthPickerPosition | BitCalendarMonthPickerPosition.Besides | Used to set month picker position. |
| OnSelectDate | EventCallback<DateTimeOffset?> | Callback for when the on selected date changed. | |
| ShowGoToToday | bool | true | Whether the "Go to today" link should be shown or not. |
| ShowWeekNumbers | bool | false | Show week number in the year. |
| TabIndex | int | 0 | The tabIndex of the TextField. |
| Value | DateTimeOffset? | null | The value of Calendar. |
| ValueChanged | EventCallback<DateTimeOffset?> | Callback for when the on date value changed. | |
| YearCellTemplate | RenderFragment<int>? | null | Used to customize how content inside the year cell is rendered. |
| ShowTimePicker | bool | false | Show time picker for select times. |
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. |
| Value | TValue? | null | Gets or sets the value of the input. This should be used with two-way binding. |
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. |
| 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. |
BitCalendarMonthPickerPosition enum
Name |
Value |
Description |
|---|---|---|
| Beside | 0 | Show the month picker at the beside. |
| Overlay | 1 | Show the month picker as overlay. |
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). |