HxCalendar #

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

Basic usage #

<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.

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 use for this is for server rendered blazor components where the server local time zone is different to the client 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 to provide appropriate error handling, caching, etc. depending on your needs.

<!-- 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 #

Methods #

Static properties #

CSS variables #