)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to render custom appointments in Schedule using MVVM pattern.

Platform: WPF |
Control: Tools |
Published Date: June 27, 2019 |
Last Revised Date: June 27, 2019
Tags: sfschedule

How to create SfSchedule in MVVM pattern with basic features

 

SfSchedule supports full data binding to any type of IEnumerable source. When a binding is established and the data changes, the UI elements that are bound to the data can reflect changes automatically and similarly when UI changes can be reflected in data object.

 

This section explains binding ItemsSource property of SfSchedule in MVVM pattern.

 

Note:

Before enter this section you should have clear idea about databinding support which is the one of the major concept used to bind the custom collection. Please refer the User Guide document to get clear idea about data binding support.

 

 

 

Creating SfSchedule in MVVM pattern

 

  1. Create a WPF application and add the SfSchedule control to it.

XAML

 

 
<syncfusion:SfSchedule x:Name="Schedule"/>
 

 

 

  1. In order to bind the data source to ItemsSource property first create a custom class (Model) for mapping Schedule appointments.

C#

 

public class ScheduleAppointmentModel : INotifyPropertyChanged
    {
        #region Properties
 
        #region StartTime
        private DateTime startTime;
        public DateTime StartTime
        {
            get
            {
                return startTime;
            }
            set
            {
                this.startTime = value;
                OnPropertyChanged("StarTime");
 
            }
        }
        #endregion
 
        #region EndTime
        private DateTime endTime;
        public DateTime EndTime
        {
            get
            {
                return endTime;
            }
            set
            {
                this.endTime = value;
                OnPropertyChanged("EndTime");
 
            }
 
        }
        #endregion
 
        #region Subject
        private string subject;
        public string Subject
        {
            get
            {
                return subject;
            }
            set
            {
                this.subject = value;
                OnPropertyChanged("Subject");
 
            }
        }
        #endregion
 
        #endregion
 
        #region PropertyChanged Event
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        public void OnPropertyChanged(string name)
        {
            if (this.PropertyChanged != null)
                this.PropertyChanged(this, new PropertyChangedEventArgs(name));
 
        }
 
        #endregion
    }

 

  1. In Next step define properties to pass the data source to ItemsSource of SfSchedule control in view model.

             ItemsSource – Used to pass the data source of custom SfSchedule appointments.

         

public class ScheduleViewModel : INotifyPropertyChanged
    {
        #region Properties
 
        #region ScheduleAppointmentCollection
        private ObservableCollection<ScheduleAppointmentModel> scheduleAppointmentCollection = new ObservableCollection<ScheduleAppointmentModel>();
 
        public ObservableCollection<ScheduleAppointmentModel> ScheduleAppointmentCollection
        {
            get
            {
                return scheduleAppointmentCollection;
            }
            set
            {
                this.scheduleAppointmentCollection = value;
                OnPropertyChanged("ScheduleAppointmentCollection");
            }
        }
        #endregion
 
        #endregion
 
        #region Constructor
 
        public ScheduleViewModel()
        {
            var startDate = DateTime.Now.Date.StartOfWeek(DayOfWeek.Monday);
            ScheduleAppointmentModel appointment1 = new ScheduleAppointmentModel()
            {
                StartTime = startDate.AddHours(5),
                EndTime = startDate.AddHours(6),
                Subject = "Johny's Appointment",
            };
 
            ScheduleAppointmentModel appointment2 = new ScheduleAppointmentModel()
            {
                StartTime = startDate.AddDays(1).AddHours(6),
                EndTime = startDate.AddDays(1).AddHours(7),
                Subject = "Neal's Appointment"
            };
 
            ScheduleAppointmentModel appointment3 = new ScheduleAppointmentModel()
            {
                StartTime = startDate.AddDays(2).AddHours(7),
                EndTime = startDate.AddDays(2).AddHours(8),
                Subject = "Peter's Appointment"
            };
 
            ScheduleAppointmentModel appointment4 = new ScheduleAppointmentModel()
            {
                StartTime = startDate.AddDays(3).AddHours(8),
                EndTime = startDate.AddDays(3).AddHours(9),
                Subject = "Morgan's Appointment"
            };
 
            ScheduleAppointmentModel appointment5 = new ScheduleAppointmentModel()
            {
                StartTime = startDate.AddDays(4).AddHours(9),
                EndTime = startDate.AddDays(4).AddHours(10),
                Subject = "Smith's Appointment"
            };
 
            scheduleAppointmentCollection.Add(appointment1);
            scheduleAppointmentCollection.Add(appointment2);
            scheduleAppointmentCollection.Add(appointment3);
            scheduleAppointmentCollection.Add(appointment4);
            scheduleAppointmentCollection.Add(appointment5);
        }
 
        #endregion
 
        #region PropertyChanged Event
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        public void OnPropertyChanged(string name)
        {
            if (this.PropertyChanged != null)
                this.PropertyChanged(this, new PropertyChangedEventArgs(name));
 
        }
 
        #endregion
    }

 

Finally set the DataContext to view model Class and pass the required collection to SfSchedule.

 

C#

 

   this.DataContext = new ScheduleViewModel();

 

XAML

 

      <syncfusion:SfSchedule x:Name="Schedule" 
                               ScheduleType="Week" TimeInterval="OneHour"
                               ItemsSource="{Binding ScheduleAppointmentCollection}">
            <syncfusion:SfSchedule.AppointmentMapping>
                <syncfusion:ScheduleAppointmentMapping
                    SubjectMapping="Subject"
                    StartTimeMapping="StartTime"
                    EndTimeMapping="EndTime"/>
            </syncfusion:SfSchedule.AppointmentMapping>
        </syncfusion:SfSchedule>

 

 

Sample Link:

Schedule_MVVM

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon