We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

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:

 

Article ID: Published Date: Last Revised Date: Platform: Control:
2548 08/28/2014 08/28/2014 WinRT SfSchedule
Tags:
Did you find this information helpful?
Comments
Heba Eldawi Nov 29, 2014
Hello, Great article, thank you for that. I just have one question. after applying the new template now the arrow that opens the datepicker is not visible anymore. I can place it but i don't really know what to call in its click event, how do i open the popup that holds the datepicker?
Reply
Jeyasri M [Syncfusion] Dec 01, 2014
Hi Heba, Thanks for using Syncfusion products. In order to customize the Calendar popup in SfSchedule you need to override the default style of HeaderTitleBarView which contains the calendar. As per your requirement, we have prepared a sample by overriding the default style of HeaderTitleBarView to customize calendar in SfSchedule. Also, the Calendar visibility and navigation based on selection of date or month in calendar is handled in the code behind. For your reference, the modified sample is attached below. In the sample we have accessed the calendar inside the middle header of the schedule using the loaded event of the schedule. And its actions are handled by listening to pointer pressed and click events. Sample Link: http://www.syncfusion.com/downloads/support/directtrac/132608/ScheduleHeaderFormat_WinRT788320995.zip Please let us know if you need any further clarifications. Regards, Jeyasri M
Reply
Add Comment
You must log in to leave a comment

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.