How to customize the appearance of appointments using DataTemplateSelector in WinUI Scheduler (Calendar)
Customize the default appearance of the scheduled appointments in all views by using the AppointmentTemplateSelector and the AllDayAppointmentSelector properties of the DayViewSettings, MonthViewSettings, and TimelineViewSettings in the WinUI Scheduler.
Here, the customization of the AppointmentTemplateSelector property of the DayViewSettings is done.
XAML
Template selector selects the DataTemplate at the runtime based on the appointment’s requirement.
<local:SubjectToImageSourceConverter x:Key="subjectToImageConverter"/>
<DataTemplate x:Key="appointmentTemplate1">
<StackPanel Background="{Binding AppointmentBackground}"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Orientation="Vertical">
<Image x:Name="Image"
VerticalAlignment="Stretch"
Height="30"
Width="15"
Margin="5,0"
Source="{Binding Converter={StaticResource subjectToImageConverter}, Path=Subject}">
</Image>
<Grid Background="{Binding AppointmentBackground}" >
<TextBlock Margin="5,0"
Text="{Binding Subject}"
Foreground="Black"
HorizontalAlignment="Center"/>
</Grid>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="appointmentTemplate2">
<StackPanel Background="{Binding AppointmentBackground}"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Orientation="Vertical">
<Image x:Name="Image"
VerticalAlignment="Stretch"
Height="30"
Width="15"
Margin="5,0"
Source="{Binding Converter={StaticResource subjectToImageConverter}, Path=Subject}">
</Image>
<Grid Background="{Binding AppointmentBackground}" >
<TextBlock Margin="5,0"
Text="{Binding Subject}"
Foreground="White"
HorizontalAlignment="Center"/>
</Grid>
</StackPanel>
</DataTemplate>
C#
Add the image in the view with help of IValueConverter for the DataTemplate.
public class SubjectToImageSourceConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (value.ToString().Equals("Meeting"))
return "../Images/Conference_schedule.png";
else
return "../Images/cake_schedule.png";
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
return null;
}
}
C#
Create an AppointmentTemplateSelector with the help of the DataTemplateSelector. Using the SelectTemplateCore override method, return the required appointment template in the view.
public class AppointmentTemplateSelector : DataTemplateSelector
{
public AppointmentTemplateSelector()
{
this.AppointmentTemplate1 = App.Current.Resources["appointmentTemplate1"] as DataTemplate;
this.AppointmentTemplate2 = App.Current.Resources["appointmentTemplate2"] as DataTemplate;
}
/// <summary>
/// Gets or sets Month Appointment Template.
/// </summary>
public DataTemplate AppointmentTemplate1 { get; set; }
public DataTemplate AppointmentTemplate2 { get; set; }
/// <summary>
/// Template selection method
/// </summary>
/// <param name="item">return the object</param>
/// <param name="container">return the bindable object</param>
/// <returns>return the template</returns>
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
if ((item as ScheduleAppointment).Subject == "Meeting")
return AppointmentTemplate1;
else
return AppointmentTemplate2;
}
}
XAML
Bind the appointments to a schedule by using the ItemsSource and StaticResource for the AppointmentTemplateSelector properties.
<Page.DataContext>
<local:SchedulerViewModel/>
</Page.DataContext>
<Grid>
<Grid.Resources>
<local:AppointmentTemplateSelector x:Key="appointmentTemplateSelector"/>
</Grid.Resources>
<syncfusion:SfScheduler x:Name="Schedule"
ViewType="Day"
ItemsSource="{Binding Appointments}">
<syncfusion:SfScheduler.DaysViewSettings>
<syncfusion:DaysViewSettings AppointmentTemplateSelector="{StaticResource appointmentTemplateSelector}" >
</syncfusion:DaysViewSettings>
</syncfusion:SfScheduler.DaysViewSettings>
</syncfusion:SfScheduler>
</Grid>
Take a moment to pursue the documentation. You can also find the options like customizing the MonthCell.
