How to customize the appointments appearance using DataTemplate in WPF Scheduler (Calendar)

2 mins read

You can customize the default appearance of schedule appointment in all views by using the AppointmentTemplate property of ViewSettingsBase in WPF SfScheduler.

Create a ViewModel class and add the appointment details.

public class SchedulerViewModel : INotifyPropertyChanged
{
   public ObservableCollection<Events> Appointments { get; set; }
    public SchedulerViewModel()
    {
        var random = new Random();
            this.Appointments = new ObservableCollection<Events>();
            for (int i = 0; i < 60; i++)
            {
                var year = DateTime.Now.Date.Year;
                var month = DateTime.Now.Date.AddMonths(random.Next(-1, 2)).Month;
                var day = random.Next(1, 30);
                var hour = random.Next(9, 14);
                var newEvent = new Events();
                newEvent.EventName = this.eventCollection[random.Next(0, 4)];
                newEvent.From = new DateTime(year, month, day, hour, 0, 0);
                newEvent.To = newEvent.From.AddHours(1);
                newEvent.Background = new SolidColorBrush((Color)ColorConverter.ConvertFromString(this.colorCollection[random.Next(0, 15)]));
                this.Appointments.Add(newEvent);
            }
    }
}

XAML

Bind the appointments to a schedule by using the Scheduler.ItemsSource property. You can customize the appearance of all day appointments in day, week and work week views by using the AllDayAppointmentTemplate property of DaysViewSettings. To, customize the appearance of appointments in timeline and month view by using the AppointmentTemplate property of TimeLineViewSettings and MonthViewSettings.

<Window.DataContext>
    <local:SchedulerViewModel/>
</Window.DataContext>
 
<Window.Resources>
 
    <local:SubjectToImageSourceConverter x:Key="subjectToImageConverter"/>
 
    <DataTemplate x:Key="appointmentTemplate">
        <StackPanel Background="{Binding Background}"  
                    VerticalAlignment="Stretch" 
                    HorizontalAlignment="Stretch"
                    Orientation="Horizontal">
            <Image x:Name="Image"
                    VerticalAlignment="Center"
                    Height="30"
                    Width="15"
                    Margin="5,0"
                    Source="{Binding Converter={StaticResource subjectToImageConverter}, Path=EventName}">
            </Image>
            <TextBlock Margin="5"
                            VerticalAlignment="Center"
                            Text="{Binding EventName}" 
                            TextTrimming="CharacterEllipsis"
                            TextWrapping="Wrap"
                            TextAlignment="Left"
                            FontWeight="Bold"/>
        </StackPanel>
    </DataTemplate>
 
    <DataTemplate x:Key="allDayAppointmentTemplate">
        <StackPanel Background="{Binding Background}"  
                    VerticalAlignment="Stretch" 
                    HorizontalAlignment="Stretch"
                    Orientation="Horizontal">
            <Image x:Name="Image" 
                        VerticalAlignment="Top"
                        Height="20"
                        Width="15"
                        Margin="5,2,0,0"
                        Source="{Binding Converter={StaticResource subjectToImageConverter}, Path=EventName}">
            </Image>
            <TextBlock Margin="5"
                            HorizontalAlignment="Stretch" 
                            VerticalAlignment="Top"
                            Text="{Binding EventName}" 
                            TextTrimming="CharacterEllipsis"
                            TextWrapping="Wrap" 
                            FontWeight="SemiBold"/>
        </StackPanel>
    </DataTemplate>
 
    <DataTemplate x:Key="monthAppointmentTemplate">
        <StackPanel Background="{Binding Background}" 
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch"
                    Orientation="Horizontal">
            <Image x:Name="Image" 
                    HorizontalAlignment="Center"
                    VerticalAlignment="Top"
                    Height="12"
                    Width="15"
                    Margin="5,2,0,0"
                    Source="{Binding Converter={StaticResource subjectToImageConverter}, Path=EventName}">
            </Image>
            <TextBlock Margin="5,2,0,0"
                        FontSize="10"
                        HorizontalAlignment="Stretch" 
                        Text="{Binding EventName}" 
                        TextTrimming="CharacterEllipsis"
                        TextWrapping="Wrap"
                        FontWeight="Heavy"/>
        </StackPanel>
    </DataTemplate>
</Window.Resources>
 
<Grid>
    <syncfusion:SfScheduler x:Name="Schedule"
                            ViewType="{Binding ElementName=viewTypeComboBox, Path=SelectedValue}" 
                            ItemsSource="{Binding Appointments}">
 
        <syncfusion:SfScheduler.MonthViewSettings>
            <syncfusion:MonthViewSettings AppointmentDisplayMode="Appointment"
                                            AppointmentTemplate="{StaticResource monthAppointmentTemplate}">
            </syncfusion:MonthViewSettings>
        </syncfusion:SfScheduler.MonthViewSettings>
 
        <syncfusion:SfScheduler.DaysViewSettings>
            <syncfusion:DaysViewSettings AppointmentTemplate="{StaticResource appointmentTemplate}"
                                            AllDayAppointmentTemplate="{StaticResource allDayAppointmentTemplate}"/>
        </syncfusion:SfScheduler.DaysViewSettings>
 
        <syncfusion:SfScheduler.TimelineViewSettings>
            <syncfusion:TimelineViewSettings AppointmentTemplate="{StaticResource appointmentTemplate}"/>
        </syncfusion:SfScheduler.TimelineViewSettings>
 
        <syncfusion:SfScheduler.AppointmentMapping>
            <syncfusion:AppointmentMapping StartTime="From"
                                            EndTime="To"
                                            Subject="EventName"
                                            AppointmentBackground="Background"
                                            IsAllDay="IsAllDay"/>
        </syncfusion:SfScheduler.AppointmentMapping>
    </syncfusion:SfScheduler>
   </Grid>
</Window>

Create a helper class SubjectToImageSourceConverter with IValueConverter.

public class SubjectToImageSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value.ToString().Equals("Conference"))
            return "../Images/Conference_schedule.png";
        else if (value.ToString().Equals("System Troubleshoot"))
            return "../Images/Troubleshoot.png";
        else if (value.ToString().Equals("Checkup"))
            return "../Images/Stethoscope.png";
        else
            return "../Images/cake_schedule.png";
    }
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }
}

View sample in GitHub

Demo image month view app