Getting Started with WPF Scheduler (SfScheduler)

18 Dec 2020 / 24 minutes to read

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

Assembly deployment

Refer to the section on control dependencies for a list of assemblies or NuGet Packages to be used as a guide for using control in any application. Further information on installing the NuGet package can be found in the following link in a WPF application: How to install nuget packages. You can also use Syncfusion Reference Manager to refer the scheduler’s dependent assemblies.

Create simple application with SfScheduler

In this section, you will create WPF application with SfScheduler control.

Creating project
Adding control via Designer
Adding control manually in XAML
Adding control manually in C#

Creating project

In Visual Studio, create a new WPF project to show the features of the SfScheduler control and add the following namespace to the added assemblies.

Assembly: Syncfusion.SfScheduler.WPF

Namespace: Syncfusion.UI.Xaml.Scheduler

Adding control via Designer

SfScheduler control can be added to the application by dragging it from Toolbox and dropping it in Designer view. The required assembly references will be added automatically.

Adding control manually in XAML

To add the control manually in XAML page, follow the given steps:

Add the Syncfusion.SfScheduler.WPF assembly reference to the project.
Import WPF schema http://schemas.syncfusion.com/wpf in the XAML page.
Declare the SfScheduler control in XAML page.

xaml
<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="clr-namespace:GettingStarted"
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
    xmlns:system="clr-namespace:System;assembly=mscorlib"  
    WindowStartupLocation="CenterScreen">
<Grid>
    <syncfusion:SfScheduler x:Name="Schedule" ViewType="Month"/>
</Grid>
</Window>

Adding control manually in C#

To add the control manually in C# page,Add the Syncfusion.SfScheduler.WPF assembly reference to the project.

c#
using Syncfusion.UI.Xaml.Scheduler;
namespace GettingStarted
{
    public partial class MainWindow : Window
    {
       SfScheduler schedule = new SfScheduler();
       this.Content = schedule;
    }
}

Change different SfScheduler Views

SfScheduler control provides five different types of views to display dates and it can be assigned to the control by using [ViewType]((https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.SfScheduler.html#Syncfusion_UI_Xaml_Scheduler_SfScheduler_ViewType) property. By default the control is assigned with MonthView. Current date will be displayed initially for all the Schedule views.

xaml
c#
<syncfusion:SfScheduler x:Name="Schedule" ViewType="Month">
Schedule.ViewType =SchedulerViewType.Month;

WPF scheduler Month view

Appointments

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

xaml
c#
<schedule:SfSchedule x:Name="schedule" ViewType="Month"/>
//Creating new event   
ScheduleAppointmentCollection appointmentCollection = new ScheduleAppointmentCollection();

//Creating new event   
ScheduleAppointment clientMeeting = new ScheduleAppointment();
DateTime currentDate = DateTime.Now;
DateTime startTime = new DateTime(currentDate.Year, currentDate.Month, currentDate.Day, 10, 0, 0);
DateTime endTime = new DateTime(currentDate.Year, currentDate.Month, currentDate.Day, 12, 0, 0);
clientMeeting.StartTime = startTime;
clientMeeting.EndTime = endTime;
clientMeeting.Subject = "ClientMeeting";
appointmentCollection.Add(clientMeeting);
Schedule.ItemsSource = appointmentCollection;

You can download the entire source code of this demo for WPF from
here SchedulerGettingStarted

Events/Appointments data mapping

You can also map custom appointments data to our scheduler.

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

Create an event Data Model
Create view model
Bind to SfScheduler appointment
Bind item source for Scheduler

Create an event Data Model

You can create a custom class Meeting with mandatory fields From, To and EventNamethat is used to map the information of the appointment.

public class Meeting : INotifyPropertyChanged
    {
        DateTime from, to;
        string eventName;
        bool isAllDay;
        string startTimeZone, endTimeZone;
        Brush color;
        public Meeting()
        {
        }

        public DateTime From
        {
            get { return from; }
            set
            {
                from = value;
                RaisePropertyChanged("From");
            }
        }

        public DateTime To
        {
            get { return to; }
            set
            {
                to = value;
                RaisePropertyChanged("To");
            }
        }

        public bool IsAllDay
        {
            get { return isAllDay; }
            set
            {
                isAllDay = value;
                RaisePropertyChanged("IsAllDay");
            }
        }
        public string EventName
        {
            get { return eventName; }
            set
            {
                eventName = value;
                RaisePropertyChanged("EventName");
            }
        }
        public string StartTimeZone
        {
            get { return startTimeZone; }
            set
            {
                startTimeZone = value;
                RaisePropertyChanged("StartTimeZone");
            }
        }
        public string EndTimeZone
        {
            get { return endTimeZone; }
            set
            {
                endTimeZone = value;
                RaisePropertyChanged("EndTimeZone");
            }
        }

        public Brush Color
        {
            get { return color; }
            set
            {
                color = value;
                RaisePropertyChanged("Color");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void RaisePropertyChanged(string propertyName, object oldValue = null)
        {
            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

    }

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 appointment using EventName and Color property. You may define the list of custom appointments in a separate class of ViewModel.

c#
public class ScheduleViewModel
    {
        private List<string> currentDayMeetings;
        private List<string> minTimeMeetings;
        private List<Brush> colorCollection;

        public ScheduleViewModel()
        {
            this.Events = new ObservableCollection<Meeting>();
            this.InitializeDataForBookings();
            this.IntializeAppoitments();
        }

        public ObservableCollection<Meeting> Events
        {
            get;
            set;
        }

        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;
        }

        private void InitializeDataForBookings()
        {
            this.currentDayMeetings = new List<string>();
            this.currentDayMeetings.Add("General Meeting");
            this.currentDayMeetings.Add("Plan Execution");

            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)ColorConverter.ConvertFromString("#FF339933")));
            this.colorCollection.Add(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF00ABA9")));
            this.colorCollection.Add(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FFE671B8")));
            this.colorCollection.Add(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF1BA1E2")));
            this.colorCollection.Add(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FFD80073")));
        }
        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++)
                    {
                        Meeting meeting = new Meeting();
                        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(2)];
                        meeting.Color = this.colorCollection[randomTime.Next(2)];
                        meeting.IsAllDay = false;
                        meeting.StartTimeZone = string.Empty;
                        meeting.EndTimeZone = string.Empty;
                        this.Events.Add(meeting);
                    }
                }
                else
                {
                    Meeting meeting = new Meeting();
                    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(2)];
                    meeting.Color = this.colorCollection[randomTime.Next(2)];
                    meeting.IsAllDay = true;
                    meeting.StartTimeZone = string.Empty;
                    meeting.EndTimeZone = string.Empty;
                    this.Events.Add(meeting);
                }
            }
            DateTime minDate;
            DateTime minDateFrom = DateTime.Now.AddDays(-2);
            DateTime minDateTo = DateTime.Now.AddDays(2);

            for (minDate = minDateFrom; minDate < minDateTo; minDate = minDate.AddDays(1))
            {
                Meeting meeting = new Meeting();
                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.StartTimeZone = string.Empty;
                meeting.EndTimeZone = string.Empty;
                
                this.Events.Add(meeting);
            }
        }
    }
}

Bind to SfScheduler appointment

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

xaml
c#
<syncfusion:SfScheduler x:Name="Schedule">
<syncfusion:SfScheduler.AppointmentMapping>
<syncfusion:AppointmentMapping
    Subject="EventName"
    StartTime="From"
    EndTime="To"
    AppointmentBackground="Color"
    IsAllDay="IsAllDay"
    StartTimeZone="StartTimeZone"
    EndTimeZone="EndTimeZone"/>
</syncfusion:SfScheduler.AppointmentMapping>
</syncfusion:SfScheduler>
AppointmentMapping appointmentMapping = new AppointmentMapping();
  appointmentMapping.IsAllDay = "AllDay";
  appointmentMapping.StartTime = "From";
  appointmentMapping.EndTime = "To";
  appointmentMapping.Subject = "Event name";
  appointmentMapping.AppointmentBackground = "color";
  appointmentMapping.StartTimeZone = "StartTimeZone";
  appointmentMapping.EndTimeZone = "EndTimeZone";
  Schedule.AppointmentMapping = appointmentMapping;

Bind item source for SfScheduler

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

xaml
c#
<Window.DataContext>
        <local:ScheduleViewModel/>
    </Window.DataContext>
      <syncfusion:SfScheduler x:Name="Schedule"
                ItemsSource="{Binding Events}"
                ViewType="Month">
      </syncfusion:SfScheduler>
ScheduleViewModel viewModel = new ScheduleViewModel();
 Schedule.ItemsSource = viewModel.Events;

NOTE

View sample in GitHub

Change first day of week

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

xaml
c#
<syncfusion:SfScheduler x:Name="Schedule" FirstDayOfWeek="Tuesday"/>
//setting first day of the week    
Schedule.FirstDayOfWeek = DayOfWeek.Tuesday;

WPF scheduler FirstDayOfWeek

Show busy indicator

The Scheduler supports to show the busy indicator by using the ShowBusyIndicator property. The default value is set to false, If the value will be set to true then the busy indicator will be load on view or visible date changed.

xaml
<syncfusion:SfScheduler x:Name="Schedule"
                ShowBusyIndicator="True"
                ViewType="Month">
        </syncfusion:SfScheduler>

WPF scheduler BusyIndicator