DxCalendar<T>.ViewMode Property

Specifies available calendar views and selectable date units.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public CalendarViewMode ViewMode { get; set; }

Property Value

Type	Description
CalendarViewMode	An enumeration value.

Available values:

Name	Description
Month	This component displays all views (Month, Year, Decade). Users can select days, months, and years.
Year	This component hides the Month view. Users can select months and years in Year and Decade views.
Decade	This component hides Month and Year views. Users can select years in the Decade view.

Remarks

You can use the ViewMode property to hide certain views and implement the following scenarios:

• Disable day selection. Users can select years and months.
• Disable day and month selection. Users can only select years.

The following example hides the Month view and limits selection to a month/year combination:

<DxCalendar T="DateTime" ViewMode="CalendarViewMode.Year" />

When day selection or day/month selection is disabled, the Calendar component selects the first day of a chosen month or year. You can update your business object value as your needs dictate. In the following code snippet, the component passes the 15th day of a month to a business object:

<DxCalendar T="DateTime" 
            ViewMode="CalendarViewMode.Year" 
            @bind-SelectedDate="@SelectedDate" />

Selected Date: <b>@date</b>

@code {
    DateTime date; // Business object
    DateTime SelectedDate {
        get
        {
            return new DateTime(date.Year, date.Month, 1);
        }
        set
        {
            date = new DateTime(value.Year, value.Month, 15);
        }
    }
}