DxCalendar<T>.SelectedDates Property

Specifies a collection of dates selected within the calendar.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.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.

Use the MinDate and MaxDate properties to specify a range of available dates. The calendar disables dates that are out of the range and hides navigation arrows for them.

Note

• The maximum date should be greater than the minimum date. Otherwise, an exception occurs.
• If a user types a date that is out of the range, the calendar keeps the previously selected date.
• You can set the SelectedDate and SelectedDates properties to dates outside the range.

<DxCalendar T="DateTime" MinDate="@(new DateTime(2020, 06, 11))" MaxDate="@(new DateTime(2020, 06, 25))" />

Run Demo: Calendar - Multi Select

Watch Video