HxCalendar

Basic calendar building block. Used for HxInputDate and HxInputDateRange implementation.

Basic usage

SunMonTueWedThuFriSat
26
27
28
29
30
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
31
1
2
3
4
5
6

Dates customization

You can change rendering of weekend days by defining your own CSS rule for .weekend class. The disabled days get .disabled class.

HxInputDate, HxInputDateRange

HxCalendar is used in implementation of HxInputDate and HxInputDateRange components. See their documentation for more info.

API

Parameters

Name Type Description
Value DateTime? Date selected.
DisplayMonth DateTime Month to display.
MinDate DateTime? First date selectable from the calendar.
Default is 1.1.1900 (configurable from HxCalendar.Defaults).
MaxDate DateTime? Last date selectable from the calendar.
Default is 31.12.2099 (configurable from HxCalendar.Defaults).
DateCustomizationProvider CalendarDateCustomizationProviderDelegate

Event Callbacks

Name Type Description
ValueChanged EventCallback<DateTime?> Raised when selected date changes.
DisplayMonthChanged EventCallback<DateTime> Raised when month selection changes.

Static properties

Property Type Description
Defaults CalendarDefaults

CSS Variables

Name Description Default
--hx-calendar-day-hover-background Day background on hover. var(--bs-gray-200)
--hx-calendar-day-hover-border Day border on hover. 1px solid var(--hx-calendar-day-hover-background)
--hx-calendar-day-selected-background Background of the selected day. var(--bs-primary)
--hx-calendar-day-selected-color Color of the selected day. white
--hx-calendar-day-selected-border Border of the selected day. 1px solid var(--bs-primary)
--hx-calendar-day-out-color Day outer color. var(--bs-gray-500)
--hx-calendar-day-in-color Day inner color. unset
--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-hover-background Navigation button background on hover. var(--bs-gray-200)
--hx-calendar-day-today-border Border of today. 1px solid #f2f9ff
--hx-calendar-day-today-background Background of today. #f2f9ff
--hx-calendar-day-today-color Color of today. var(--bs-primary)
--hx-calendar-day-border-radius Day border radius. .25rem
--hx-calendar-day-padding Day padding. .375rem .5rem
--hx-calendar-day-width Day width. 2.25rem
--hx-calendar-day-height Day height. 2.25rem
--hx-calendar-day-spacing Day spacing. .125rem .25rem
--hx-calendar-font-size Font size within the calendar. .875rem
An unhandled error has occurred. Reload 🗙