Category / Section
How to customize the Week View Appointments in the Schedule Windows phone?
1 min read
The template for the Week-View appointment can be customized easily by overriding the default template of the WeekAppointmentsControl. This article explains how to create the twenty four hours’ time format in the SfSchedule.
Overriding WeekAppointmentsControl:
- Create a Windows Phone application and add the SfSchedule control to it. Then, customize the TimeFormat by overriding the WeekAppointmentsControl.
XAML
<Page.Resources>
<local:AppointmentTimeConverter x:Key="timeconverter"/>
<Style TargetType="Schedule:WeekAppointmentsControl">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Schedule:WeekAppointmentsControl">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="7,0,0,0" FontWeight="Normal" FontSize="12" Foreground="{TemplateBinding Foreground}"
Text="{Binding Converter={StaticResource timeconverter}}" />
<TextBlock Margin="7,0,0,0" Grid.Column="1" FontWeight="Normal" FontSize="12"
Foreground="{Binding AppointmentBackground}"
Text="{Binding Subject}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
- Change the default time format by using the IValueconverter as given in the following code example.
C#
//Modifies the TimeFormat as twenty four hours.
public class AppointmentTimeConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (value is ScheduleAppointment)
{
var app = value as ScheduleAppointment;
DateTime dt = app.StartTime;
return dt.ToString("HH:mm");
}
return new DateTime();
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
- Create the appointments.
C#
// Creates appointments.
schedule.Appointments.Add(new ScheduleAppointment()
{
StartTime = DateTime.Now.Date.AddHours(15),
EndTime = DateTime.Now.Date.AddHours(16),
Subject = "Business Meeting",
AppointmentBackground= new SolidColorBrush(Colors.Red),
Location = "Brazil",
});
- You can also override the default AppointmentTemplate in order to get the same TimeFormat by binding the timeconverter.
XAML
<Schedule:SfSchedule x:Name="schedule" ScheduleType="Week" >
<Schedule:SfSchedule.AppointmentTemplate>
<DataTemplate>
<Grid>
<Rectangle Fill="{Binding AppointmentBackground}" Width="400"/>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.50*"/>
<RowDefinition Height="0.25*"/>
<RowDefinition Height="0.25*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition Width="0.7*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Subject}" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" FontSize="20" />
<TextBlock Text="{Binding Converter={StaticResource timeconverter}}" Grid.Row="0" Grid.Column="0" FontSize="18"/>
<TextBlock Text="{Binding Location}" Grid.Row="1" Grid.Column="1" FontSize="15"/>
</Grid>
</Grid>
</DataTemplate>
</Schedule:SfSchedule.AppointmentTemplate>
</Schedule:SfSchedule>
The following screenshots display the appointments with twenty four hours TimeFormat in Week View.
Figure 1: Appointment with twenty four hours TimeFormat in Week View
Figure 2: Expanded appointment with twenty four hours TimeFormat in Week View
