MonthCalendar

Description

This component represents a calendar control in Blazor using the Gap.Blazor.MonthCalendar model. It uses the Telerik Calendar component to support single or range date selection, with customizable appearance, date constraints, and interactive behaviors such as focus handling and cell rendering.

Usage

@if (this.Visible)
{
    <WMStyleBase model="@this.MonthCalendar"></WMStyleBase>

    <div class="@(this.MonthCalendar.GetStringClasses() + this.GetShowTodayStyle() + this.GetShowTodayCircleStyle())"
         tabindex="-1"
         @ref="this.CalendarWrapperRef">
        <TelerikCalendar AllowReverse="true"
                         Date="@this.CurrentDate"
                         Max="@this.MonthCalendar.MaxDate"
                         Min="@this.MonthCalendar.MinDate"
                         OnCellRender="@this.OnCellRenderHandler"
                         RangeEnd="@this.RangeEnd"
                         RangeEndChanged="@this.RangeEndChangeHandler"
                         RangeStart="@this.RangeStart"
                         RangeStartChanged="@this.RangeStartChangeHandler"
                         SelectionMode="@this.GetSelectionMode()"
                         ShowWeekNumbers="@this.MonthCalendar.ShowWeekNumbers"
                         Size="@ThemeConstants.Calendar.Size.Small"
                         View="CalendarView.Month"
                         @bind-Value="@this.SelectedDate"
                         @ref="this.CalendarRef">
        </TelerikCalendar>
    </div>
}

Properties

  • MonthCalendar: Instance of the Gap.Blazor.MonthCalendar model.

  • SelectedDate: Bound to SelectionStart in single selection mode.

  • RangeStart / RangeEnd: Used in range selection mode.

  • CurrentDate: Controls the visible month in the calendar.

  • CalendarRef: Reference to the Telerik Calendar component.

  • CalendarWrapperRef: Reference to the calendar container for JS interop.

Methods

  • OnInitialized(): Subscribes to model events and initializes selection.

  • OnAfterRenderAsync(): Registers JS focus handler on first render.

  • GetSelectionMode(): Returns Single or Range based on MaxSelectionCount.

  • OnCellRenderHandler(): Adds CSS classes to cells outside min/max range or exceeding selection bounds.

  • RangeStartChangeHandler() / RangeEndChangeHandler(): Updates selection range and triggers events.

  • SetSelectionRange(start, end): Applies selection logic with max range enforcement.

  • SyncModelSelectionChanges(): Updates selection and triggers UI refresh.

  • UpdateSelection(): Refreshes calendar view and updates internal state.

  • OnDateChanged() / OnDateSelected(): Triggers model events for date changes.

Dynamic Rendering

  • TelerikCalendar: Renders the calendar UI with support for:

    • Single or range selection

    • Min/Max date constraints

    • Week numbers

    • Custom cell rendering

  • CSS Classes: Dynamically applied to hide today button or circle.

Styles

.hide-today-button { /* hides today button */ }
.hide-today-circle { /* hides today circle */ }
.hide-date { visibility: hidden; }
.exceeds-max-range { opacity: 0.5; pointer-events: none; }

Events

  • MaxDateChanged / MinDateChanged / DateChanged

  • MaxSelectionCountChanged / ShowWeekNumbersChanged

  • ShowTodayChanged / ShowTodayCircleChanged

  • OnDateChanged / OnDateSelected

PreviousMessageBoxNextPanel

Last updated