Articles in this section
Category / Section

Render custom appointments in Schedule using MVVM pattern in WPF Tools

4 mins read

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


Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied