> For the complete documentation index, see [llms.txt](https://docs.gapvelocity.ai/blazor-ai-migrator/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gapvelocity.ai/blazor-ai-migrator/blazor-ai-migrator/dcp-desktop-compatibility-library/components-information/monthcalendar.md).

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

### &#x20;**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**

```css
.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**