HxCalendar #
Basic calendar building block. Used for HxInputDate and HxInputDateRange implementation.
Basic usage #
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
27 | 28 | 29 | 30 | 31 | 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 |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
<div class="calendar-demo">
<HxCalendar @bind-Value="value" />
</div>
@code
{
private DateTime? value = DateTime.Today;
}Dates customization #
You can change rendering of weekend days by defining your own CSS rule for .weekend class.
The disabled days get .disabled class.
For more detailed customization use the DateCustomizationProvider parameter which allows you setting
CssClass and Enabled values for every single date rendered.
HxInputDate, HxInputDateRange #
HxCalendar is used in implementation of HxInputDate
and HxInputDateRange components. See their documentation for more info.
API #
Parameters #
| Name | Type | Description |
|---|---|---|
| DateCustomizationProvider | CalendarDateCustomizationProviderDelegate |
Allows customization of the dates in calendar. |
| DisplayMonth | DateTime |
Month to display. |
| DisplayMonthChanged | EventCallback<DateTime> |
Raised when month selection changes. |
| KeyboardNavigation | bool |
Indicates whether the keyboard navigation is enabled. When disabled, the calendar renders tabindex="-1" on interactive elements.
Default is true (tabindex attribute is not rendered). |
| MaxDate | DateTime? |
Last date selectable from the calendar. Default is 31.12.2099 (configurable from HxCalendar.Defaults). |
| MinDate | DateTime? |
First date selectable from the calendar. Default is 1.1.1900 (configurable from HxCalendar.Defaults). |
| Settings | CalendarSettings |
Set of settings to be applied to the component instance (overrides HxCalendar.Defaults, overridden by individual parameters). |
| Value | DateTime? |
Date selected. |
| ValueChanged | EventCallback<Nullable<DateTime>> |
Raised when selected date changes. |
Methods #
| Method | Returns | Description |
|---|---|---|
| RefreshAsync() | Task |
Refreshes the calendar. Useful when the customization needs to be updated. |
Static properties #
| Property | Type | Description |
|---|---|---|
| Defaults | CalendarSettings |
Application-wide defaults for the HxCalendar. |
CSS variables #
| Name | Description | Default |
|---|---|---|
| --hx-calendar-day-hover-background | Day background on hover. | var(--bs-tertiary-bg) |
| --hx-calendar-day-border | Day border. | none |
| --hx-calendar-day-hover-border | Day border on hover. | none |
| --hx-calendar-day-selected-background | Background of the selected day. | var(--bs-primary) |
| --hx-calendar-day-selected-color | Color of the selected day. | var(--bs-white) |
| --hx-calendar-day-selected-border | Border of the selected day. | none |
| --hx-calendar-day-out-color | Day outer color. | var(--bs-tertiary-color) |
| --hx-calendar-day-in-color | Day inner color. | unset |
| --hx-calendar-day-disabled-opacity | Disabled day opacity. | .5 |
| --hx-calendar-day-disabled-text-decoration | Disabled day text decoration. | line-through |
| --hx-calendar-day-names-color | Color of the day names. | unset |
| --hx-calendar-day-names-font-weight | Font weight of the day names. | 700 |
| --hx-calendar-navigation-button-focus-box-shadow | Navigation button box shadow when focused. | 0 0 0 0.25rem rgb(0 157 224 / 25%) |
| --hx-calendar-navigation-button-hover-background | Navigation button background on hover. | var(--bs-tertiary-bg) |
| --hx-calendar-navigation-button-text-color | Navigation button text color. | var(--bs-tertiary-color) |
| --hx-calendar-day-today-border | Border of today. | none |
| --hx-calendar-day-today-background | Background of today. | var(--bs-primary-rgb) |
| --hx-calendar-day-today-background-opacity | Background opacity of today. | .05 |
| --hx-calendar-day-today-color | Color of today. | var(--bs-primary) |
| --hx-calendar-day-border-radius | Day border radius. | .25rem |
| --hx-calendar-day-width | Day width. | 2.25rem |
| --hx-calendar-day-height | Day height. | 2.25rem |
| --hx-calendar-day-spacing | Day spacing. | .125rem |
| --hx-calendar-font-size | Font size within the calendar. | .875rem |