Articles in this section
Category / Section

How to create the customized appointment template in the SfSchedule?

1 min read

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

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

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