How to create 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

Create a WPF 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. If you use the custom data with appointment mapping feature in 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.

    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.