Render custom appointments in Schedule using MVVM pattern in WPF Tools
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.
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
- Create a WPF application and add the SfSchedule control to it.
XAML
<syncfusion:SfSchedule x:Name="Schedule"/>
- 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 }
- 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: