DxCalendar<T>.SelectedDates Property

Specifies a collection of dates selected within the calendar.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public IEnumerable<T> SelectedDates { get; set; }

Property Value

Type	Description
IEnumerable<T>	A collection of selected dates.

Remarks

To enable multiple date selection in the calendar, set the EnableMultiSelect property to true. The SelectedDates collection allows you to iterate through selected dates, remove individual dates from the selection, or add new dates to the selection.

You can use the @bind attribute to bind the SelectedDates property to a data field. Refer to Two-Way Data Binding.

<DxCalendar EnableMultiSelect="true"
            @bind-SelectedDates="SelectedDates" />

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

    IEnumerable<DateTime> GetSelectedDates()
    {
        DateTime baseDate = DateTime.Today;
        SelectedDates = new List<DateTime>() { baseDate.AddDays(-9), baseDate.AddDays(-5), baseDate.AddDays(-4),
                                    baseDate.AddDays(6), baseDate.AddDays(12), baseDate.AddDays(13),
                                    baseDate.AddDays(15) };
        return SelectedDates;
    }

    protected override void OnInitialized()
    {
        SelectedDates = GetSelectedDates();
    }
}

To handle selection changes, use the SelectedDatesChanged event.

Run Demo: Calendar - Multi Select

Watch Video