Selection in WinUI Calendar (SfCalendar)

22 Jul 20267 minutes to read

You can change the selected date interactively by clicking on the specific date, or you can select it programmatically. By default, the Calendar control allows you to select a single date at a time.

If you want to restrict date selection or select multiple dates, set the SelectionMode property value to one of the following values:

• None - Prevents selecting a date.
• Single - Allows you to select a single date.
• Multiple - Allows you to select multiple dates.
• Range - Allows you to select a range of dates.

Single selection

You can select a single date interactively by clicking on a specific date or programmatically using the SelectedDate property. By default, the value of the SelectedDate property is null and the SelectedDates collection is empty.

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

SfCalendar sfCalendar = new SfCalendar();
sfCalendar.SelectedDate = new DateTimeOffset(new DateTime(2021, 01, 06));

If the SelectedDates collection is used instead of the SelectedDate property, the first date value in the SelectedDates collection is set as the selected date, and this value changes upon selection by interaction.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <Grid>
        <Grid.DataContext>
            <local:ViewModel x:Name="viewModel" />
        </Grid.DataContext>
        <calendar:SfCalendar x:Name="calendar"
                            SelectionMode="Single" 
                            SelectedDates="{x:Bind viewModel.SelectedDates, Mode=TwoWay}"
                            />
    </Grid>
</Window>

ViewModel.cs

using Syncfusion.UI.Xaml.Calendar;

public class ViewModel
{
    private DateTimeOffsetCollection selectedDates;

    public DateTimeOffsetCollection SelectedDates
    {
        get { return selectedDates; }
        set { selectedDates = value; }
    }

    public ViewModel()
    {
        SelectedDates = new DateTimeOffsetCollection();

        SelectedDates.Add(new DateTimeOffset(new DateTime(2020, 03, 10)));
        SelectedDates.Add(new DateTimeOffset(new DateTime(2020, 03, 14)));
        SelectedDates.Add(new DateTimeOffset(new DateTime(2020, 03, 15)));
        SelectedDates.Add(new DateTimeOffset(new DateTime(2020, 03, 21)));
        SelectedDates.Add(new DateTimeOffset(new DateTime(2020, 03, 24)));
    }
}

NOTE

If the SelectedDate property is used to select a date and the SelectionMode property value is Single, then the SelectedDates collection property will have only the SelectedDate property value.

Multiple selection

You can select one or more dates from a different month, year, decade, or century by changing the SelectionMode property value to Multiple. You can also get the selected dates collection from the SelectedDates property. By default, the value of the SelectedDate property is null and the SelectedDates collection is empty.

NOTE

If the SelectionMode value is None, the SelectedDates collection will be empty.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendar Name="sfCalendar" 
                         SelectionMode="Multiple" />
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

SfCalendar sfCalendar = new SfCalendar();
sfCalendar.SelectionMode = CalendarSelectionMode.Multiple;

NOTE

If the SelectedDate property is used to select a date and the SelectionMode property value is Multiple, then the SelectedDates collection property will have only the SelectedDate property value.

NOTE

The SelectedDate property value will be the same as the first date value in the SelectedDates collection and changes with it.

Select a date range

You can select a range of dates in the Calendar control by changing the SelectionMode property value to Range. You can also get the selected range of dates from the SelectedDates property. By default, the value of the SelectedDate property is null and the SelectedDates collection is empty.

NOTE

The SelectedDates collection is empty and the SelectedDate property value is null when a date range is selected.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendar Name="sfCalendar" 
                         SelectionMode="Range" />
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

SfCalendar sfCalendar = new SfCalendar();
sfCalendar.SelectionMode = CalendarSelectionMode.Range;

NOTE

Download demo application from Github.

Highlight today and selected date

You can highlight the today and selected date using the SelectionHighlightMode property to update the background and border of the dates. The default value of the SelectionHighlightMode property is Outline.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendar x:Name="sfCalendar" 
                         SelectionHighlightMode="Filled"
                         />
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

SfCalendar sfCalendar = new SfCalendar();
sfCalendar.SelectionHighlightMode = SelectionHighlightMode.Filled;

NOTE

Download demo application from Github.

Change shape of today and selected date

You can customize the today and selected date cell shape using the SelectionShape property to customize the shape of the date cell border. The default value of the SelectionShape property is Circle.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendar x:Name="sfCalendar"
                         SelectionShape="Rectangle"
                         />
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

SfCalendar sfCalendar = new SfCalendar();
sfCalendar.SelectionShape = SelectionShape.Rectangle;

NOTE

Download demo application from GitHub.