HxCalendar #

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

Basic usage #

SunMonTueWedThuFriSat
25
26
27
28
29
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
<div class="calendar-demo">
	<HxCalendar @bind-Value="value" />
</div>

@code
{
	private DateTime? value = DateTime.Today;
}

Dates customization #

You can customize the rendering of weekend days by defining your own CSS rule for the .weekend class. Disabled days are assigned the .disabled class.

For more detailed customization, use the DateCustomizationProvider parameter, which allows you to set CssClass and Enabled values for each date rendered.

HxInputDate, HxInputDateRange #

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

Time zones #

You can change the time zone used by the calendar by providing a custom TimeProvider. TimeProvider is resolved in the following order:

  1. TimeProvider parameter on HxCalendar, HxInputDate and HxInputDateRange.
  2. Settings HxCalendar.Settings
  3. Defaults HxCalendar.Defaults
  4. Adding a TimeProvider service via dependency injection.
  5. The default TimeProvider.System time provider.

One application of this is for server-rendered Blazor components where the server's local time zone differs from the client's time zone. See the following sample:

using System;

public class ZonedTimeProvider
{
	// Create a time provider that work with a time zone different than the local time zone 
	public class ZonedTimeProvider : TimeProvider
	{
		private TimeZoneInfo _zoneInfo;
		public ZonedTimeProvider(TimeZoneInfo zoneInfo) : base()
		{
			_zoneInfo = zoneInfo ?? TimeZoneInfo.Local;
		}
		public override TimeZoneInfo LocalTimeZone { get => _zoneInfo; }
	}
}

Use the ZonedTimeProvider. Ensure that Defaults are configured in Program.cs or where you maintain your other defaults. Please expand this to include appropriate error handling, caching, etc., as per your requirements.

<!-- Parameter -->
<HxCalendar TimeProvider="usersTimeProvider" />

<!-- Using supplied Settings -->
<HxCalendar Settings="UsersCalendarSettings" />

<!-- Using configured Defaults -->
<HxCalendar />
@code {

	TimeProvider usersTimeProvider = new ZonedTimeProvider(TimeZoneInfo.FindSystemTimeZoneById("UTC-11"));

	// OR

	public static CalendarSettings UsersCalendarSettings => new()
	{
		TimeProvider = usersTimeProvider,
	};

	// OR

    // Program.cs or somewhere where you maintain the defaults
    HxCalendar.Defaults.TimeProvider = new ZonedTimeProvider(TimeZoneInfo.FindSystemTimeZoneById("E. Australia Standard Time"));

}

API #

Parameters #

Name Type Description
DateCustomizationProvider CalendarDateCustomizationProviderDelegate Allows customization of the dates in calendar.
DisplayMonth DateTime Month to display.
DisplayMonthChanged EventCallback<DateTime> Raised when the 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 Defaults).
MinDate DateTime? First date selectable from the calendar.
Default is 1.1.1900 (configurable from Defaults).
Settings CalendarSettings Set of settings to be applied to the component instance (overrides Defaults, overridden by individual parameters).
TimeProvider TimeProvider TimeProvider is resolved in the following order:
1. TimeProvider from this parameter
2. Settings TimeProvider (configurable from Settings)
3. Defaults TimeProvider (configurable from Defaults)
Value DateTime? Date selected.
ValueChanged EventCallback<Nullable<DateTime>> Raised when the 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. .1
--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
An unhandled error has occurred. Reload 🗙