DxCalendar Class

A Calendar component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxCalendar :
    DxCalendarBase

Remarks

DevExpress Calendar for Blazor (<DxCalendar>) allows users to select dates and navigate through months and years.

Blazor_DataEditors_Landing_Calendar

NOTE

Online Demo: Calendar - Overview

To add the <DxCalendar> component to an application, follow the steps below:

  1. Create and configure the application as described in the Create a New Blazor Application document.

  2. Add the <DxCalendar>...</DxCalendar> markup to your application.

Select Dates

A user should click a date to select it. To enable multi selection, set the EnableMultiSelect to true.

To select a range of dates, a user should select the initial date, hold the left mouse button down and move the mouse to the final date. To add/remove individual dates to/from the selection, a user should click a date with the Ctrl key pressed.

The SelectedDates collection stores all the selected dates. To handle selection changes, use the SelectedDatesChanged event.

<DxCalendar 
            EnableMultiSelect="true" 
            SelectedDatesChanged="OnSelectedDatesChanged" 
            SelectedDates="@SelectedDates">
</DxCalendar>

@foreach (DateTime date in SelectedDates)
{
    <p>
        @date.ToShortDateString()
    </p>
}

@code{
    List<DateTime> SelectedDates = new List<DateTime>();

    void OnSelectedDatesChanged(IEnumerable<DateTime> selectedDates)
    {
        SelectedDates = selectedDates.ToList();
        InvokeAsync(StateHasChanged);
    }
}

Blazor_Calendar_Multiple_Select

NOTE

Online Demo: Calendar - Multi Select

Disable Dates

Handle the CustomDisabledDate event to disable the selection of specific dates. This event raises each time a day cell is rendered.

<DxCalendar CustomDisabledDate="@OnCustomDisabledDate">
</DxCalendar>

@code {
    void OnCustomDisabledDate(CalendarCustomDisabledDateEventArgs args) {
        args.IsDisabled = args.Date < DateTime.Today.AddDays(-20) || GetDisabledDates().Exists(d => DaysEqual(d, args.Date));
    }
    bool DaysEqual(DateTime date1, DateTime date2) {
        return (date1.Year == date2.Year && date1.DayOfYear == date2.DayOfYear);
    }
    List<DateTime> GetDisabledDates() {
        DateTime baseDate = DateTime.Today;
        return new List<DateTime>() { baseDate.AddDays(-9), baseDate.AddDays(-4), baseDate.AddDays(-3), baseDate.AddDays(3), baseDate.AddDays(5), baseDate.AddDays(6), baseDate.AddDays(15) };
    }

Blazor_Calendar_Disabled_Dates

NOTE

Online Demo: Calendar - Disabled Dates

Customize Day Cells

Use the calendar’s DayCellTemplate property to customize day cells.

<DxCalendar>
    <DayCellTemplate>
        <a class="@GetCssClassNames(context)">@context.Day.ToString()</a>
    </DayCellTemplate>
</DxCalendar>

@code {
    DateTime BaseDate = DateTime.Today;

    string GetCssClassNames(DateTime date) {
        string result = string.Empty;

        if(GetPersonalDays().Exists(d => DaysEqual(d, date)))
            result = "font-weight-bold text-success";
        if(GetHolidays().Exists(d => DaysEqual(d, date)))
            result = "text-danger";
        if(GetBirthdays().Exists(d => DaysEqual(d, date)))
            result += "font-weight-bold text-info";

        return result;
    }
}

Blazor_Calendar_Day_Cell_Customization

Appearance

A table below lists API members you can use to customize the Calendar's appearance:

Member

Description

VisibleDate

Specifies the month and the year to display on the calendar.

FirstDayOfWeek

Specifies the first day of the week in the calendar.

ShowClearButton

Specifies whether the Clear button is displayed in the calendar's footer.

Read-Only State

<DxCalendar> supports a read-only state. Set the ReadOnly property to true to activate this option.

<DxCalendar ReadOnly="true"/>

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.CalendarJSInteropProxy>
DevExpress.Blazor.Internal.DxEditorBase<DateTime, DevExpress.Blazor.Internal.JSInterop.CalendarJSInteropProxy>
DxCalendarBase
DxCalendar
See Also