Basic calendar building block. Used for HxInputDate
and HxInputDateRange
implementation.
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
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 | 8 |
<div class="calendar-demo">
<HxCalendar @bind-Value="value" />
</div>
@code
{
private DateTime? value = DateTime.Today;
}
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.
HxCalendar
is used in implementation of HxInputDate
and HxInputDateRange
components. See their documentation for more info.
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. |
Method | Returns | Description |
---|---|---|
RefreshAsync() | Task |
Refreshes the calendar. Useful when the customization needs to be updated. |
Property | Type | Description |
---|---|---|
Defaults | CalendarSettings |
Application-wide defaults for the HxCalendar . |
Name | Description | Default |
---|---|---|
--hx-calendar-day-hover-background | Day background on hover. | var(--bs-gray-200) |
--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-gray-500) |
--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-gray-200) |
--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 |