Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxCalendar<T>.SelectedDates Property

Specifies a collection of dates selected within the calendar.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

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

Razor
<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.
Razor
<DxCalendar T="DateTime" MinDate="@(new DateTime(2020, 06, 11))" MaxDate="@(new DateTime(2020, 06, 25))" />

Run Demo: Calendar - Multi Select

Watch Video

See Also