Getting Started with WinUI Calendar (SfCalendar)

9 Aug 20216 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

In this walkthrough, you will create a WinUI application that contains the Calendar control.

Adding control manually in XAML

To add Calendar control manually in XAML , follow the below steps.

1. Create a WinUI 3 desktop app for C# and .NET 5.

2. Download and refer the following NuGet in the project.

   • Syncfusion.Calendar.WinUI
3. Import the control namespace Syncfusion.UI.Xaml.Calendar in XAML page.
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>

Adding control manually in C#

To add the Calendar control manually in C#, follow the below steps.

1. Create a WinUI 3 desktop app for C# and .NET 5 or WinUI 3 app in UWP for C#.

2. Download and refer the following NuGet in the project.

   • Syncfusion.Calendar.WinUI
3. Import the Calendar namespace Syncfusion.UI.Xaml.Calendar in C# page.
4. Initialize the Calendar control.

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, SelectedDate property value is null and Calendar control allows you to select single date at a time.

If you want to restrict date selection or select multiple dates, set SelectionMode property value 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. By default, SelectedDates collection will be empty.

NOTE

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

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. By default, SelectedDates collection will be empty.

NOTE

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

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 is 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 was 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 using MinDate and MaxDate properties.
• Selecting a date or dates from blocked dates using BlackoutDates property.
• Selecting a date or dates from specifically blocked set of dates (example : blocking weekend dates) using ItemPrepared event.

For further details refer Restrict Date Selection.

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) using MinDisplayMode and MaxDisplayMode properties.

  

• You can navigate within a view horizontally or vertically using NavigationDirection property. By default, navigation direction is vertical within a view either by mouse scrolling or by navigation buttons.

For further details refer Navigation.