How to customize the header of SfCalendar?

You can customize the header of SfCalendar by using the HeaderTemplate property. This article explains how to customize the header of SfCalendar and to display the month.

Customize the header of SfCalendar

Create a WindowsPhone application and add SfCalendar to it. Set the HeaderTemplate to SfCalendar. Bind the DisplayDate of SfCalendar to the Text property of the TextBlock. In the following code example, StringFormat is set as “MMMM” to change the header.

XAML

<input:SfCalendar x:Name="calendar">
   <input:SfCalendar.HeaderTemplate>
     <DataTemplate>
       <TextBlock Text="{Binding ElementName=calendar, Path=DisplayDate, StringFormat=MMMM}"/>
     </DataTemplate>
   </input:SfCalendar.HeaderTemplate>
</input:SfCalendar>

The following screenshot displays the output of the above code.

Figure 1: SfCalendar with customized Header that displays the Month of the displayed date