#364 – Allowing a User to Select Multiple Dates in a Calendar Control

By default, the Calendar control allows a user to select a single date.  You can set the SelectionMode property to allow the user to select more than one date.

SelectionMode (CalendarSelectionMode enumeration) can have one of the following values:

  • None – user can’t select date
  • SingleDate – select a single date  (default)

  • SingleRange – select a contiguous range of dates

  • MultipleRange – select multiple ranges of dates

If the SelectionMode is SingleDate, the SelectedDate property (DateTime) will contain the selected date.

If the SelectionMode is SingleRange or MultipleRange, the SelectedDates property (ObservableCollection of DateTime) will contain all of the selected dates.  The SelectedDate property will contain a copy of the first date in the SelectedDates collection.

Advertisements

#363 – Calendar Control Basics

The Calendar control displays an image of a calendar and allows a user to select a date.  By default, the calendar shows a single month that includes the current date.

    <StackPanel HorizontalAlignment="Center" Margin="15">
        <Calendar Name="cal"/>
        <Label Content="{Binding ElementName=cal, Path=SelectedDate, StringFormat=d}"/>
    </StackPanel>

When the user selects a date on the calendar, the SelectedDate property indicates the day that was selected.

You can use the left and right arrow icons at the top of the control to navigate to the previous/next month.

The Calendar control can also display a single year, or a single decade.  To switch to the Year mode, click on the name of the month at the top of the control.

You can now navigate to the previous/next year using the arrows, or click on a specific month.

You can switch to Decade mode by clicking on the year at the top of the control.