How to customize the appearance of appointments using DataTemplateSelector in WPF Scheduler (Calendar)?
FlectoreusaCustomize the default appearance of schedule appointment in all views by using the MonthCellTemplateSelector, AppointmentTemplateSelector, AllDayAppointmentSelector properties of the DayViewSettings, MonthViewSettings,TimelineViewSettings in WPF SfScheduler
XAML
Template selector selects the DataTemplate at runtime based on the month cell with or without appointments, normal and all-day appointments.
<Window.Resources>
<ObjectDataProvider x:Key="schedulerViewTypes" MethodName="GetValues"
ObjectType="{x:Type system:Enum}">
<ObjectDataProvider.MethodParameters>
<x:Type Type="{x:Type syncfusion:SchedulerViewType}"/>
</ObjectDataProvider.MethodParameters>
</ObjectDataProvider>
<local:SubjectToImageSourceConverter x:Key="subjectToImageConverter"/>
<local:MonthCellTemplateSelector x:Key="monthCellTemplateSelector"/>
<local:AppointmentTemplateSelector x:Key="appointmentTemplateSelector"/>
<local:AllDayAppointmentSelector x:Key="allDayAppointmentTemplateSelector"/>
<DataTemplate x:Key="monthCellTemplate">
<Label Content="{Binding DateText}"
Foreground="{Binding Foreground}"
HorizontalContentAlignment="Center"/>
</DataTemplate>
<DataTemplate x:Key="appointmentTemplate">
<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>
<Label Margin="5,0"
Content="{Binding Subject}"
Foreground="Black"
Background="{Binding AppointmentBackground}"
HorizontalContentAlignment="Center"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="allDayAppointmentTemplate">
<Label Content="{Binding Subject}"
Foreground="White"
Background="{Binding AppointmentBackground}"
HorizontalContentAlignment="Center"/>
</DataTemplate>
<DataTemplate x:Key="monthAppointmentTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<Label Content="{Binding DateText}"
Foreground="White"
Background="DarkMagenta"
HorizontalContentAlignment="Center"
Grid.Row="0"/>
<TextBlock DataContext="{Binding MonthCellAppointment}"
Foreground="Black"
HorizontalAlignment="Stretch"
Text="{Binding Subject}"
Background="{Binding AppointmentBackground}"
TextWrapping="Wrap" TextAlignment="Center"
Grid.Row="1"/>
</Grid>
</DataTemplate>
</Window.Resources>
XAML
Bind the appointments to a schedule by using the Scheduler.ItemsSource and resource for the template selector properties.
<syncfusion:SfScheduler x:Name="Schedule"
ViewType="{Binding ElementName=viewTypeComboBox, Path=SelectedValue}"
ItemsSource="{Binding Appointments}">
<syncfusion:SfScheduler.MonthViewSettings>
<syncfusion:MonthViewSettings AppointmentDisplayMode="None"
MonthCellTemplateSelector="{StaticResource monthCellTemplateSelector}">
</syncfusion:MonthViewSettings>
</syncfusion:SfScheduler.MonthViewSettings>
<syncfusion:SfScheduler.DaysViewSettings>
<syncfusion:DaysViewSettings AppointmentTemplateSelector="{StaticResource appointmentTemplateSelector}" AllDayAppointmentTemplateSelector="{StaticResource allDayAppointmentTemplateSelector}">
</syncfusion:DaysViewSettings>
</syncfusion:SfScheduler.DaysViewSettings>
<syncfusion:SfScheduler.TimelineViewSettings>
<syncfusion:TimelineViewSettings AppointmentTemplateSelector="{StaticResource appointmentTemplateSelector}" TimelineAppointmentHeight="50">
</syncfusion:TimelineViewSettings>
</syncfusion:SfScheduler.TimelineViewSettings>
</syncfusion:SfScheduler>
|
Hope you enjoyed learning about how to customize the appearance of appointments using DataTemplateSelector in WPF Scheduler.
For current customers, you can check out our Angular components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Angular Diagram and other Angular components.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
