Getting Started with WinUI Calendar

15 Apr 2021 / 6 minutes to read

This section explains the steps required to add the WinUI Calendar control and its date selection options. This section covers only basic features needed to get started with Syncfusion Calendar control.

Structure of Calendar control

Creating an application with WinUI Calendar

1. Create a WinUI 3 desktop app for C# and .NET 5 or WinUI 3 app in UWP for C#.
2. Add reference to Syncfusion.Calendar.WinUI NuGet.
3. Import the control namespace Syncfusion.UI.Xaml.Calendar in XAML or C# code.
4. Initialize the Calendar control.

xaml

<Page
    x:Class="GettingStarted.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GettingStarted"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid Name="grid">
        <!--Adding Calendar control -->
        <calendar:SfCalendar Name="sfCalendar"/>
    </Grid>
</Page>

c#

using Syncfusion.UI.Xaml.Calendar;

namespace GettingStarted
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            // Creating an instance of the Calendar control
            SfCalendar sfCalendar = new SfCalendar();

            grid.Children.Add(sfCalendar);
        }
    }
}

NOTE

Download demo application from GitHub

Select a date

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

If you want to change the selection mode, select required value for SelectionMode property from below values.

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

c#

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

NOTE

Download demo application from GitHub

Select multiple dates

You can select one or multiple dates from different month, year or decade or century, by changing the SelectionMode property value to Multiple. You can get the selected dates collection from the SelectedDates property.

NOTE

SelectedDates property collection will be empty if the SelectionMode value is None or Single and the dates are selected interactively.

xaml

<calendar:SfCalendar Name="sfCalendar" 
                     SelectionMode="Multiple" />

c#

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

NOTE

Download demo application from GitHub

Select a date range

You can select a range of dates in Calendar control by changing the SelectionMode property value to Range. You can get the selected dates collection from the SelectedDates property.

NOTE

SelectedDates property collection will be empty if the SelectionMode value is None or Single.

xaml

<calendar:SfCalendar Name="sfCalendar" 
                     SelectionMode="Range" />

c#

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

Selection changed notification

You will be notified when selected date changed in Calendar by using SelectedDateChanged event. The SelectedDateChanged event contains the old and newly selected date in the OldDate, NewDate properties.

• OldDate - Gets a date which is previously selected.
• NewDate - Gets a date which is currently selected.

xaml

<calendar:SfCalendar SelectedDateChanged="SfCalendar_SelectedDateChanged" 
                     Name="sfCalendar"/>

c#

SfCalendar sfCalendar = new SfCalendar();
sfCalendar.SelectedDateChanged += SfCalendar_SelectedDateChanged;

You can handle the event as follows:

c#

private void SfCalendar_SelectedDateChanged(object sender, SelectedDateChangedEventArgs e)
{
    var oldDate = e.OldDate;
    var newDate = e.NewDate;
}

Restrict selection

You can restrict users from selecting single or multiple dates within a specific minimum and maximum range or by blocking unwanted dates using blackout dates or by blocking specific set of dates (blocking weekend dates).

For brief explanation of selection restriction in Calendar control click here.

Navigation between views

You can navigate between month, year, decade and century views in Calendar control. You can also restrict the users to navigate between specific views only (month and year selection for credit card).

You can navigate within a view horizontally or vertically. By default, navigation direction is vertical within a view either by mouse scrolling or by navigation buttons. For brief explanation of navigation between views in Calendar control click here.