How to create the customized appointment template in the SfSchedule?
The template of appointments can be easily customized in the SfSchedule by using the AppointmentTemplate property. This article explains how to create customized appointment template in the SfSchedule control.
Creating customized appointment template
- Create a Silverlight application and add the SfSchedule control to it. Now, modify the appointment’s template by using the AppointmentTemplate property as in the following code example.
XAML
<syncfusion:SfSchedule ScheduleType="Month" Name="schedule" > <syncfusion:SfSchedule.AppointmentTemplate> <DataTemplate> <Grid> <Rectangle Fill="White" Stroke="Black" StrokeThickness="3"></Rectangle> <StackPanel Orientation="Horizontal"> <Rectangle Fill="{Binding AppointmentBackground}" Width="10" ></Rectangle> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="15" Text="{Binding Subject}" Foreground="{Binding AppointmentBackground}" FontStyle="Normal"></TextBlock> </StackPanel> </Grid> </DataTemplate> </syncfusion:SfSchedule.AppointmentTemplate> </syncfusion:SfSchedule>
Note: In the above template, “Subject” and “AppointmentBackground” properties of the ScheduleAppointment class are used for binding. When you use the custom data with appointment mapping feature in the SfSchedule to show appointments, you need to use the properties in the custom data of the AppointmentTemplate.
- Now create appointments and add it to the Schedule as follows.
C#
DateTime currentdate = DateTime.Now.Date; ScheduleAppointment app = new ScheduleAppointment() { StartTime = currentdate.AddHours(9),, EndTime = currentdate.AddHours(12), Subject = "Meeting", Location = "Chennai", AppointmentBackground = new SolidColorBrush(Colors.Blue) }; schedule.Appointments.Add(app); ScheduleAppointment app1 = new ScheduleAppointment() { StartTime = currentdate AddHours(9),, EndTime = currentdate.AddHours(13), Subject = "Conference", Location = "Chennai", AppointmentBackground = new SolidColorBrush(Colors.Green) }; schedule.Appointments.Add(app1);
Note: Now, the appointments in the SfSchedule look as follows.
The following screenshots display the output in different views.
Figure 1: Customized appointment template in the month view
Figure 2: Customized appointment template in the day view
Figure 3: Customized appointment template in the timeline view
Figure 4: Customized appointment template in the week view