How to create the customized appointment template in the WinRT 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

1. Create a WinRT 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

<Grid Background="White">
<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> <Grid Background="White">

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.

2. 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

Conclusion

I hope you enjoyed learning about how to create the customized appointment template in the WinRT SfSchedule.

You can refer to our WinRT SfSchedule feature tour page to know about its other groundbreaking feature representations and how to quickly get started for configuration specifications. You can also explore our 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!