How to render custom appointments in Schedule using MVVM pattern in WPF Schedule?
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:
Conclusion
I hope you enjoyed learning about how to render custom appointments in Schedule using MVVM pattern in WPF Schedule
You can refer to our WPF Schedule feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Schedule example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
