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
<Schedule:SfSchedule x:Name="schedule1" ScheduleType="Day" Loaded="schedule1_Loaded_1" />
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#
private void schedule1_Loaded_1(object sender, RoutedEventArgs e)
{
SfSchedule schedule = sender as SfSchedule;
var _prevButton = VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(schedule, 0), 0), 7) as Button;
var _nextButton = VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(schedule, 0), 0), 8) as Button;
_prevButton.Height = 0;
_nextButton.Height = 0; ;
}
To customize the Schedule header, you need to override the default style of HeaderTitleBarView Control in the application as follows.
XAML
<Page.Resources>
<local:DateTimeConverter x:Key="conv" />
<!-- HeaderTitleBarView -->
<Style TargetType="Schedule:HeaderTitleBarView">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Schedule:HeaderTitleBarView">
<Grid Visibility="{TemplateBinding Visibility}"
x:Name="Header_Grid" Height="80"
HorizontalAlignment="Center" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Fill="White" x:Name="leftArrow" Height="40" Width="40"
Margin="0,0,20,0" PointerPressed="leftArrow_Click_1" />
<ContentPresenter Content="←" Height="30" Width="40" VerticalAlignment="Center" PointerPressed="leftArrow_Click_1" HorizontalAlignment="Center"
Foreground="Teal" FontSize="24" />
<TextBlock x:Name="txtBlock1" DataContext="{TemplateBinding SelectedDates}" Text="{Binding Converter={StaticResource conv}}"
FontWeight="Bold" FontSize="34" Foreground="White" VerticalAlignment="Center" Grid.Column="1" Margin="0,2,0,0" />
<Rectangle Fill="White" Grid.Column="2" x:Name="rightArrow" Height="40" Width="40"
Margin="20,0,0,0" PointerPressed="rightArrow_Click_1" />
<ContentPresenter Grid.Column="2" Content="→" Height="30" Width="40" HorizontalAlignment="Center"
PointerPressed="rightArrow_Click_1" Margin="30,0,0,0" VerticalAlignment="Center"
Foreground="Teal" FontSize="24" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
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#
public class DateTimeConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
CultureInfo currentCulture = CultureInfo.CurrentCulture;
var selectedDates = (ObservableCollection<DateTime>)value;
if (selectedDates == null || selectedDates.Count <= 0)
{
return null;
}
var firstDate = selectedDates.OrderByDescending(x => x).Last();
var lastDate = selectedDates.OrderByDescending(x => x).First();
string result;
if (selectedDates.Count <= 7)
{
if (firstDate.Month == lastDate.Month && firstDate.Year == lastDate.Year)
result = currentCulture.DateTimeFormat.GetMonthName(currentCulture.Calendar.GetMonth(firstDate)) + ", " + lastDate.Year;
else if (firstDate.Year == lastDate.Year)
result = currentCulture.DateTimeFormat.GetMonthName(currentCulture.Calendar.GetMonth(firstDate)) + " - " + currentCulture.DateTimeFormat.GetMonthName(currentCulture.Calendar.GetMonth(lastDate)) + ", " + lastDate.Year;
else
result = currentCulture.DateTimeFormat.GetMonthName(currentCulture.Calendar.GetMonth(firstDate)) + " " + firstDate.Year + " - " + currentCulture.DateTimeFormat.GetMonthName(currentCulture.Calendar.GetMonth(lastDate)) + ", " + lastDate.Year;
}
else
{
var month = currentCulture.DateTimeFormat.GetMonthName(currentCulture.Calendar.GetMonth(selectedDates[selectedDates.Count / 2].Date));
result = month + ", " + selectedDates[selectedDates.Count / 2].Year;
}
return result;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
return null;
}
}
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#
Binding visdatecoll = new Binding();
visdatecoll.Source = this;
visdatecoll.Path = new PropertyPath("CurrentDate");
visdatecoll.Mode = BindingMode.TwoWay;
this.schedule1.SetBinding(SfSchedule.VisibleDatesProperty, visdatecoll);
You can navigate the date of the Schedule using the MoveToDate() method of the SfSchedule.
C#
schedule1.MoveToDate(this.CurrentDate[0]);
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#
private void leftArrow_Click_1(object sender, RoutedEventArgs e)
{
switch (this.schedule1.ScheduleType)
{
case ScheduleType.Day:
{
this.CurrentDate[0] = this.CurrentDate[0].SubractDays(_dayCount);
break;
}
case ScheduleType.Week:
case ScheduleType.WorkWeek:
case ScheduleType.TimeLine:
{
if (this.CurrentDate.Count > 1)
{
this.CurrentDate[0] = this.CurrentDate[0].SubractDays(_weekDaysCount);
}
else
{
this.CurrentDate[0] = this.CurrentDate[0].SubractDays(_dayCount);
};
break;
}
case ScheduleType.Month:
{
this.CurrentDate[0] = this.CurrentDate[0].SubractDays(_monthDaysCount);
break;
}
}
this.schedule1.MoveToDate(this.CurrentDate[0]);
}
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#
private void rightArrow_Click_1(object sender, RoutedEventArgs e)
{
switch (this.schedule1.ScheduleType)
{
case ScheduleType.Day:
{
this.CurrentDate[0] = this.CurrentDate[0].AddDays(_dayCount);
break;
}
case ScheduleType.Week:
case ScheduleType.WorkWeek:
case ScheduleType.TimeLine:
{
if (this.CurrentDate.Count > 1)
{
this.CurrentDate[0] = this.CurrentDate[0].AddDays(_weekDaysCount);
}
else
{
this.CurrentDate[0] = this.CurrentDate[0].AddDays(_dayCount);
}
break;
}
case ScheduleType.Month:
{
this.CurrentDate[0] = this.CurrentDate[0].AddDays(_monthDaysCount);
break;
}
}
this.schedule1.MoveToDate(this.CurrentDate[0]);
}
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:
