Getting Started with WPF Scheduler (SfScheduler)

22 Jul 202624 minutes to read

This section provides an overview for working with SfScheduler for WPF and also provides a walkthrough to configure the WPF Scheduler (SfScheduler) control in a 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 . Use Syncfusion Reference Manager to refer the scheduler’s dependent assemblies.

NOTE

The SfScheduler control is available from Syncfusion WPF package version 18.2.0.45 onward. It is supported on .NET Framework 4.5.1+, .NET Core 3.1, and .NET 5/6. The SfScheduler replaces the deprecated SfSchedule control; new features and enhancements are added only to SfScheduler.

Create simple application with SfScheduler

In this section, create a WPF application with the WPF Scheduler (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 WPF Scheduler (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 a 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 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <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
    {
        public MainWindow()
        {
            InitializeComponent();
            SfScheduler schedule = new SfScheduler();
            this.Content = schedule;
        }
    }
}

Change SfScheduler Views

The WPF Scheduler (SfScheduler) control provides five different types of views to display dates, and the view can be assigned to the control by using the ViewType property. The supported view types are Day, Week, WorkWeek, Month, and Timeline. By default, the control is assigned with MonthView. The current date will be displayed initially for all the Schedule views.

XAML
C#
<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <syncfusion:SfScheduler x:Name="Schedule" ViewType="Month"/>
    </Grid>
</Window>
using Syncfusion.UI.Xaml.Scheduler;

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. Assign the generated collection to the ItemsSource property of SfScheduler.

Creating the schedule 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#
<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <syncfusion:SfScheduler x:Name="schedule" ViewType="Month"/>
    </Grid>
</Window>
using Syncfusion.UI.Xaml.Scheduler;

//Creating a new event   
ScheduleAppointmentCollection appointmentCollection = new ScheduleAppointmentCollection();

//Creating a new appointment   
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;

Download the entire source code of this demo for WPF from
here SchedulerGettingStarted

Creating the custom Events/Appointments with data mapping

Map the custom appointments data to the scheduler.

Here are the 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

Create a custom class Meeting with mandatory fields From, To and EventName that is used to map the information of the appointment.

using System;
using System.ComponentModel;
using System.Windows.Media;

    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 the Meeting class, schedule the meetings for a specific day. You can change the subject and color of the appointment using the EventName and Color properties. Define the list of custom appointments in a separate ViewModel class.

C#
using Syncfusion.UI.Xaml.Scheduler;
. . .
   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.InitializeAppointments();
        }

        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 Meeting");
            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 InitializeAppointments()
        {
            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 appointments

Map the properties of the Meeting class with the WPF Scheduler (SfScheduler) control by using the AppointmentMapping property.

XAML
C#
<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <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>
    </Grid>
</Window>
using Syncfusion.UI.Xaml.Scheduler;

  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 the appointments collection Events to the ItemsSource property of SfScheduler.

XAML
C#
<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Window.DataContext>
        <local:ScheduleViewModel/>
    </Window.DataContext>
    <syncfusion:SfScheduler x:Name="Schedule"
            ItemsSource="{Binding Events}"
            ViewType="Month">
    </syncfusion:SfScheduler>
</Window>
using Syncfusion.UI.Xaml.Scheduler;

 ScheduleViewModel viewModel = new ScheduleViewModel();
 Schedule.ItemsSource = viewModel.Events;

NOTE

View sample in GitHub

Change first day of week

WPF Scheduler (SfScheduler) control will be rendered with Sunday as the first day of the week, but it can be customized to any day by using the FirstDayOfWeek property of SfScheduler.

XAML
C#
<Window 
   . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <syncfusion:SfScheduler x:Name="Schedule" FirstDayOfWeek="Tuesday"/> 
    </Grid>
</Window>
using Syncfusion.UI.Xaml.Scheduler;

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

WPF scheduler FirstDayOfWeek

Show busy indicator

The Scheduler supports showing the busy indicator by using the ShowBusyIndicator property. The default value is set to false. When the value is set to true, the busy indicator will be loaded on view or visible date changed.

XAML
<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
       <syncfusion:SfScheduler x:Name="Schedule"
                ShowBusyIndicator="True"
                ViewType="Month">
        </syncfusion:SfScheduler>
    </Grid>
</Window>

WPF scheduler BusyIndicator

Troubleshooting

If appointments do not appear in the Scheduler, verify the following:

The ItemsSource is bound to a non-empty collection implementing IEnumerable, and the bound data raises INotifyPropertyChanged for live updates.
The AppointmentMapping values exactly match the property names of the custom business object (case-sensitive).
The appointment StartTime is earlier than its EndTime; otherwise the appointment will not render.
When binding a ScheduleAppointmentCollection directly, no AppointmentMapping is required; mapping is only needed for custom data objects.
For more diagnostic steps, refer to the Appointments documentation.

Theme

WPF Scheduler (SfScheduler) supports various built-in themes. Refer to the links below to apply themes for the SfScheduler:

Setting theme to WPF scheduler

## See also

Overview — Introduction to the WPF Scheduler features.
Appointments — Detailed information on appointments, mapping, spanned, all-day, and recurrence appointments.
Appointment editing — Add, edit, and delete appointments using the built-in appointment editor.
Appointment drag and drop — Reschedule appointments by drag-and-drop.
Day and Week views — Customize day, week, and work week views.
Timeline views — Customize timeline day, week, work week, and month views.
Month view — Customize the month view, agenda view, and blackout dates.
Date navigation — Configure minimum/maximum dates, programmatic date selection, and view navigation.
Header — Customize the scheduler header height, date format, and appearance.
Events — Handle cell tapped, selection changed, and view changed events.
Context menu and commands — Add context menus for appointments and time slots.
Time zone — Create and display appointments across time zones.
Resource grouping — Group appointments by resources or dates.
Reminder — Enable reminder alerts for appointments.
Load on demand — Load appointments on demand for large date ranges.
Calendar types — Use Gregorian, Hebrew, Hijri, and other calendar types.
Localization — Localize scheduler text using resource files.
Migrating from SfSchedule to SfScheduler — API mapping for migration from the deprecated SfSchedule control.

NOTE

You can refer to our WPF Scheduler feature tour page for its groundbreaking feature representations. You can also explore our WPF Scheduler example to know how to schedule and manage appointments through an intuitive user interface, similar to the Outlook calendar.

Search docs

Ask Syncfusion AI Assistant