How to customize SfSchedule Header?

The SfSchedule allows you to customize the Schedule header by overriding the default style of HeaderTitleBarView control. This article explains how to customize the SfSchedule header.

For Customizing SfSchedule Header:

Create a WinRT application and add SfSchedule control as follows.

XAML

Using Loaded event of SfSchedule, you can hide the default previous and next button of SfSchedule.

Refer the following code example to hide default button of SfSchedule:

C#

To customize the Schedule header, you need to override the default style of HeaderTitleBarView Control in the application as follows.

XAML

In the above mentioned style, you have the Textblock that is used to display the selected date, using the SelectedDates property of HeaderTitleBarView control.

Using the Converter, you can get the string of the current date from the SelectedDates property of HeaderTitleBarView control. In which the converter returns the string based on the Schedule view. Refer the following code example to get the Selected Date string by using Converter:

C#

The above mentioned Style has two ContentPresenter of Content “←” and “→" that is included to navigate the dates using its PointerPressed event based on the VisibleDates collection of the Scehedule.

To get the Schedule VisibleDates property of the SfSchedule control, you need to bind this property with the local property of the application.

Refer the following code example for binding the Schedule’s VisibleDates to the local property:

C#

You can navigate the date of the Schedule using the MoveToDate() method of the SfSchedule.

C#

On PointerPressed event of Left Arrow ContentPresenter (“←") in the template, the date of the Schedule is moved to the specific date based on listening the current VisibleDates of Schedule and also based on the Schedule type.

Refer the following code example.

C#

On Pointerpressed event of Right Arrow ContentPresenter ("→") in the template, the date of the schedule is moved to the specific date based on listening the current VisibleDates of Schedule and also based on the Schedule type.

Refer the following code example.

C#

Sample Link:

ScheduleHeaderFormat_WinRT.zip

The following screenshots shows the customized SfSchedule header in different Views.

Header Customization in Day View:

Header Customization in Week View:

Header Customization in Month View:

Header Customization in TimeLine View: