Getting Started with WinUI Scheduler (SfScheduler)

22 Jul 202624 minutes to read

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

Creating an application with WinUI Scheduler

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

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

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

  4. Initialize the WinUI Scheduler control.

    <Window
    x:Class="GettingStarted.MainWindow"
    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">
   
    <Grid>
        <scheduler:SfScheduler x:Name="Schedule" ViewType="Month" />
    </Grid>
</Window>
    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 MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            SfScheduler scheduler = new SfScheduler();
            this.Content = scheduler;
        }
    }
}

Change different Scheduler Views

The WinUI Scheduler control provides eight different types of views to display dates, and the desired view 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 Scheduler views.

<Window
    ...
    xmlns:scheduler="using:Syncfusion.UI.Xaml.Scheduler">
    <scheduler:SfScheduler x:Name="Schedule" 
                           ViewType="Month">
    </scheduler:SfScheduler>
</Window>
using Syncfusion.UI.Xaml.Scheduler;

this.Schedule.ViewType = SchedulerViewType.Month;

show-month-view-in-winui-scheduler

Appointments

The WinUI Scheduler has a built-in capability to handle the appointment arrangement internally based on the ScheduleAppointment collections. Assign the generated collection to the Appointments property.

Creating the schedule appointments

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

using Syncfusion.UI.Xaml.Scheduler;

// 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 WinUI Scheduler.
this.Schedule.ItemsSource = scheduleAppointmentCollection;

NOTE

View sample in GitHub

Creating the custom Events/Appointments with data mapping

Map the custom appointments data to our scheduler.

NOTE

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

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

Creating custom class to map that object with appointment

Create a custom class Meeting with the mandatory fields From, To, and EventName.

using Syncfusion.UI.Xaml.Scheduler;

    /// <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

Inherit this class from the INotifyPropertyChanged for dynamic changes in custom data.

Create view model

By setting the From and To properties of the Meeting class, you can schedule meetings for a specific day. Change the Subject and Color of the appointment by using the EventName and Color properties. Define the list of custom appointments in a separate view model class.

using Syncfusion.UI.Xaml.Scheduler;

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

    /// <summary>
    /// Holds the minimum time meetings.
    /// </summary>
    private List<string> minTimeMeetings;

    /// <summary>
    /// Holds the 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>
    /// Gets the timing range.
    /// </summary>
    /// <returns>Returns the 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>
    /// Initializes the data for 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>
    /// Initializes the appointments.
    /// </summary>
    /// <param name="count">The 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>
    /// Gets the foreground color based on the background.
    /// </summary>
    /// <param name="backgroundColor">The background brush.</param>
    /// <returns>The foreground brush.</returns>
    private Brush GetAppointmentForeground(Brush backgroundColor)
    {
        if ((backgroundColor as SolidColorBrush).Color.ToString().Equals("#FF8551F2") || (backgroundColor as SolidColorBrush).Color.ToString().Equals("#FF5363FA") || (backgroundColor as SolidColorBrush).Color.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

Map the properties of the Meeting class to our WinUI Scheduler control by using the AppointmentMapping property.

<Window
    ...
    xmlns:scheduler="using:Syncfusion.UI.Xaml.Scheduler">
    <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>
</Window>
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 that Appointments collection to the ItemsSource property of SfScheduler.

<Window
    ...
    xmlns:scheduler="using:Syncfusion.UI.Xaml.Scheduler">
    <Grid>
        <Grid.DataContext>
            <local:SchedulerViewModel/>
        </Grid.DataContext>
        <scheduler:SfScheduler x:Name="Schedule" 
                               ItemsSource="{Binding Appointments}" 
                               ViewType="Month"/>
    </Grid>
</Window>
using Syncfusion.UI.Xaml.Scheduler;

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

NOTE

View sample in GitHub

Change first day of week

The WinUI Scheduler control is rendered with Sunday as the first day of the week by default, but you can customize it to any day by using the FirstDayOfWeek property of SfScheduler.

<Window
    ...
    xmlns:scheduler="using:Syncfusion.UI.Xaml.Scheduler">
    <scheduler:SfScheduler x:Name="Schedule"  
                           FirstDayOfWeek="Monday">
    </scheduler:SfScheduler>    
</Window>
using Syncfusion.UI.Xaml.Scheduler;

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

change-first-day-of-week-in-winui-scheduler