Getting started with WinUI Scheduler (SfScheduler)

15 Apr 2021 / 22 minutes to read

This section provides you an overview of working with SfScheduler for WinUI and also provides a walk-through to configure the SfScheduler control in a real-time scenario.

Creating an application with WinUI Scheduler

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

2. Add reference to the Syncfusion.Scheduler.WinUI NuGet.

3. Import the control namespace Syncfusion.UI.Xaml.Scheduler in XAML or C# code.

4. Initialize the SfScheduler 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:scheduler="using:Syncfusion.UI.Xaml.Scheduler"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <scheduler:SfScheduler x:Name="Schedule" ViewType="Month" />
    </Grid>
</Page>

c#

using Syncfusion.UI.Xaml.Scheduler;

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();
            SfScheduler scheduler = new SfScheduler();
            this.Content = scheduler;
        }
    }
}

Change different Scheduler Views

The SfScheduler control provides eight different types of views to display dates and it can be assigned to the control by using the ViewType property. By default, the control is assigned with the Month view. The current date will be displayed initially for all the Schedule views.

xaml

<scheduler:SfScheduler x:Name="Schedule" ViewType="Month" />

c#

this.Schedule.ViewType = SchedulerViewType.Month;

Appointments

The SfScheduler has a built-in capability to handle the appointment arrangement internally based on the ScheduleAppointment collections. You need to allocate the collection generated to the Appointments property.

Adding Appointments

The ScheduleAppointment is a class that includes the specific scheduled appointment. It has some basic properties such as StartTime, EndTime, Subject, and some additional information about the appointment can be added with Notes, Location, and IsAllDay properties.

c#

// Creating an instance for the schedule appointment collection.
var scheduleAppointmentCollection = new ScheduleAppointmentCollection();

//Adding schedule appointment in the schedule appointment collection. 
scheduleAppointmentCollection.Add(new ScheduleAppointment()
{
    StartTime = new DateTime(2021, 03, 16, 10, 0, 0),
    EndTime = new DateTime(2021, 03, 16, 12, 0, 0),
    Subject = "Client Meeting",
    Location = "Hutchison road",
});

//Adding the schedule appointment collection to the ItemSource of SfScheduler.
Schedule.ItemsSource = scheduleAppointmentCollection;

NOTE

View sample in GitHub

Events/Appointments data mapping

You can also map custom appointments data to our scheduler.

NOTE

The CustomAppointment class should contain two DateTime fields and a string field as mandatory.

Here steps to render meetings using the SfScheduler control with respective custom data properties created in a class Meeting.

• Creating custom class to map that objects with ScheduleAppointment
• Create view model
• Mapping the data object to ScheduleAppointment
• Bind item source for Scheduler

Creating custom class to map that object with appointment

You can create a custom class Meeting with mandatory fields From, To, and EventName.

c#

/// <summary>    
    /// Represents the custom data properties.    
    /// </summary>    
    public class Meeting 
    { 
        public string EventName { get; set; } 
        public DateTime From { get; set; } 
        public DateTime To { get; set; } 
        public bool IsAllDay { get; set; } 
        public Brush Color { get; set; } 
        public Brush ForegroundColor { get; set; } 
        public string StartTimeZone { get; set; } 
        public string EndTimeZone { get; set; } 
    }

NOTE

You can inherit this class from the INotifyPropertyChanged for dynamic changes in custom data.

Create view model

By setting From and To of Meeting class, you can schedule meetings for a specific day. You can also change the Subject and color of the appointment using the EventName and Color properties. You may define the list of custom appointments in a separate class of ViewModel.

c#

public class SchedulerViewModel
{
    /// <summary>
    /// current day meetings 
    /// </summary>
    private List<string> currentDayMeetings;

    /// <summary>
    /// minimum time meetings
    /// </summary>
    private List<string> minTimeMeetings;
    
    /// <summary>
    /// color collection
    /// </summary>
    private List<Brush> colorCollection;

    /// <summary>
    /// Initializes a new instance of the <see cref="ScheduleViewModel" /> class.
    /// </summary>
     
    public SchedulerViewModel()
    {
        this.Appointments = new ObservableCollection<SchedulerModel>();
        this.InitializeDataForBookings();
        this.IntializeAppoitments();
    }

    /// <summary>
    /// Gets or sets appointments.
    /// </summary>
    public ObservableCollection<SchedulerModel> Appointments
    {
        get;
        set;
    }

    /// <summary>
    /// Method for get timing range.
    /// </summary>
    /// <returns>return time collection</returns>
    private List<Point> GettingTimeRanges()
    {
        List<Point> randomTimeCollection = new List<Point>();
        randomTimeCollection.Add(new Point(9, 11));
        randomTimeCollection.Add(new Point(12, 14));
        randomTimeCollection.Add(new Point(15, 17));

        return randomTimeCollection;
    }

    /// <summary>
    /// Method for initialize data bookings.
    /// </summary>
    private void InitializeDataForBookings()
    {
        this.currentDayMeetings = new List<string>();
        this.currentDayMeetings.Add("General Meeting");
        this.currentDayMeetings.Add("Plan Execution");
        this.currentDayMeetings.Add("Project Plan");
        this.currentDayMeetings.Add("Consulting");
        this.currentDayMeetings.Add("Performance Check");
        this.currentDayMeetings.Add("Yoga Therapy");
        this.currentDayMeetings.Add("Plan Execution");
        this.currentDayMeetings.Add("Project Plan");
        this.currentDayMeetings.Add("Consulting");
        this.currentDayMeetings.Add("Performance Check");

        // MinimumHeight Appointment Subjects
        this.minTimeMeetings = new List<string>();
        this.minTimeMeetings.Add("Client Metting");
        this.minTimeMeetings.Add("Birthday wish alert");

        this.colorCollection = new List<Brush>();
        this.colorCollection.Add(new SolidColorBrush(Color.FromArgb(255, 133, 81, 242)));
        this.colorCollection.Add(new SolidColorBrush(Color.FromArgb(255, 140, 245, 219)));
        this.colorCollection.Add(new SolidColorBrush(Color.FromArgb(255, 83, 99, 250)));
        this.colorCollection.Add(new SolidColorBrush(Color.FromArgb(255, 255, 222, 133)));
        this.colorCollection.Add(new SolidColorBrush(Color.FromArgb(255, 45, 153, 255)));
        this.colorCollection.Add(new SolidColorBrush(Color.FromArgb(255, 253, 183, 165)));
        this.colorCollection.Add(new SolidColorBrush(Color.FromArgb(255, 198, 237, 115)));
        this.colorCollection.Add(new SolidColorBrush(Color.FromArgb(255, 253, 185, 222)));
        this.colorCollection.Add(new SolidColorBrush(Color.FromArgb(255, 83, 99, 250)));
    }

    /// <summary>
    /// Initialize appointments.
    /// </summary>
    /// <param name="count">count value</param>
    private void IntializeAppoitments()
    {
        Random randomTime = new Random();
        List<Point> randomTimeCollection = this.GettingTimeRanges();

        DateTime date;
        DateTime dateFrom = DateTime.Now.AddDays(-100);
        DateTime dateTo = DateTime.Now.AddDays(100);
        var random = new Random();
        var dateCount = random.Next(4);
        DateTime dateRangeStart = DateTime.Now.AddDays(0);
        DateTime dateRangeEnd = DateTime.Now.AddDays(1);

        for (date = dateFrom; date < dateTo; date = date.AddDays(1))
        {
            if (date.Day % 7 != 0)
            {
                for (int additionalAppointmentIndex = 0; additionalAppointmentIndex < 1; additionalAppointmentIndex++)
                {
                    SchedulerModel meeting = new SchedulerModel();
                    int hour = randomTime.Next((int)randomTimeCollection[additionalAppointmentIndex].X, (int)randomTimeCollection[additionalAppointmentIndex].Y);
                    meeting.From = new DateTime(date.Year, date.Month, date.Day, hour, 0, 0);
                    meeting.To = meeting.From.AddHours(1);
                    meeting.EventName = this.currentDayMeetings[randomTime.Next(9)];
                    meeting.Color = this.colorCollection[randomTime.Next(9)];
                    meeting.ForegroundColor = GetAppointmentForeground(meeting.Color);
                    meeting.IsAllDay = false;
                    meeting.StartTimeZone = string.Empty;
                    meeting.EndTimeZone = string.Empty;
                    this.Appointments.Add(meeting);
                }
            }
            else
            {
                SchedulerModel meeting = new SchedulerModel();
                meeting.From = new DateTime(date.Year, date.Month, date.Day, randomTime.Next(9, 11), 0, 0);
                meeting.To = meeting.From.AddDays(2).AddHours(1);
                meeting.EventName = this.currentDayMeetings[randomTime.Next(9)];
                meeting.Color = this.colorCollection[randomTime.Next(9)];
                meeting.ForegroundColor = GetAppointmentForeground(meeting.Color);
                meeting.IsAllDay = true;
                meeting.StartTimeZone = string.Empty;
                meeting.EndTimeZone = string.Empty;
                this.Appointments.Add(meeting);
                }
            }

        // Minimum Height Meetings.
        DateTime minDate;
        DateTime minDateFrom = DateTime.Now.AddDays(-2);
        DateTime minDateTo = DateTime.Now.AddDays(2);

        for (minDate = minDateFrom; minDate < minDateTo; minDate = minDate.AddDays(1))
        {
            SchedulerModel meeting = new SchedulerModel();
            meeting.From = new DateTime(minDate.Year, minDate.Month, minDate.Day, randomTime.Next(9, 18), 30, 0);
            meeting.To = meeting.From;
            meeting.EventName = this.minTimeMeetings[randomTime.Next(0, 1)];
            meeting.Color = this.colorCollection[randomTime.Next(0, 2)];
            meeting.ForegroundColor = GetAppointmentForeground(meeting.Color);
            meeting.StartTimeZone = string.Empty;
            meeting.EndTimeZone = string.Empty;

            this.Appointments.Add(meeting);
        }
    }

    /// <summary>
    /// Method to get the foreground color based on background.
    /// </summary>
    /// <param name="backgroundColor"></param>
    /// <returns></returns>
    private Brush GetAppointmentForeground(Brush backgroundColor)
    {
        if ((backgroundColor as SolidColorBrush).Color.ToString().Equals("#FF8551F2") || (backgroundColor as SolidColorBrush).ToString().Equals("#FF5363FA") || (backgroundColor as SolidColorBrush).ToString().Equals("#FF2D99FF"))
            return new SolidColorBrush(Microsoft.UI.Colors.White);
        else
            return new SolidColorBrush(Color.FromArgb(255, 51, 51, 51));
    }
}

Mapping the data object to ScheduleAppointment

You can map those properties of the Meeting class with our SfScheduler control by using the AppointmentMapping property.

xaml

<scheduler:SfScheduler x:Name="Schedule">
    <scheduler:SfScheduler.AppointmentMapping>
        <scheduler:AppointmentMapping
            Subject="EventName"
            StartTime="From"
            EndTime="To"
            AppointmentBackground="Color"
            Foreground="ForegroundColor"    
            IsAllDay="IsAllDay"
            StartTimeZone="StartTimeZone"
            EndTimeZone="EndTimeZone"/>
    </scheduler:SfScheduler.AppointmentMapping>
</scheduler:SfScheduler>

c#

using Syncfusion.UI.Xaml.Scheduler;

AppointmentMapping appointmentMapping = new AppointmentMapping();
appointmentMapping.Subject = "EventName";
appointmentMapping.StartTime = "From";
appointmentMapping.EndTime = "To";
appointmentMapping.AppointmentBackground = "Color";
appointmentMapping.Foreground = "ForegroundColor";
appointmentMapping.IsAllDay = "IsAllDay";
appointmentMapping.StartTimeZone = "StartTimeZone";
appointmentMapping.EndTimeZone = "EndTimeZone";
Schedule.AppointmentMapping = appointmentMapping;

Bind item source for Scheduler

Create meetings of type ObservableCollection<Appointments> and assign those appointments collection Appointments to the ItemsSource property of SfScheduler.

xaml

<Page.DataContext>
    <local:SchedulerViewModel/>
</Page.DataContext>

<Grid>
    <scheduler:SfScheduler x:Name="Schedule" ItemsSource="{Binding Appointments}" ViewType="Month"/>
</Grid>

c#

SchedulerViewModel schedulerViewModel = new SchedulerViewModel();
Schedule.ItemsSource = schedulerViewModel.Appointments;

NOTE

View sample in GitHub

Change first day of week

The SfScheduler control will be rendered with Sunday as the first day of the week but you can customize it to any day by using the FirstDayOfWeek property of SfScheduler.

xaml

<scheduler:SfScheduler x:Name="Schedule"  FirstDayOfWeek="Monday"/>

c#

//setting first day of the week.    
Schedule.FirstDayOfWeek = DayOfWeek.Monday;