How to customize the view header using DataTemplate in WPF Scheduler (Calendar)

2 mins read

You can customize the default appearance of the view header by using the ViewHeaderTemplate property in WPF SfScheduler.

Create a custom class Meeting with mandatory fields From, To, EventName and color.

public class Meeting
{
    public string EventName { get; set; }
    public DateTime From { get; set; }
    public DateTime To { get; set; }
    public Brush color { get; set; }
}

Create a ViewModel class and add the appointment details.

public class SchedulerViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Meeting> meetings;
    
    public SchedulerViewModel()
    {
        Meetings = new ObservableCollection<Meeting>();
        Meeting meeting = new Meeting();
         meeting.color = colorCollection[random.Next(10)];
         meeting.From = today.AddMonths(month).AddDays(day);
         meeting.To = meeting.From.AddHours(2);
         this.Meetings.Add(meeting);
    }
}

XAML

Bind the appointments to a schedule using the Scheduler.ItemsSource property. You can customize the default appearance of the view header in Day, Week and Workweek views by using the ViewHeaderTemplate property of DaysViewSettings. You can customize the appearance of view header in Month and Timeline views by using the ViewHeaderTemplate property of MonthViewSettings and TimelineViewSettings in Scheduler.

<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>
 
        <DataTemplate x:Key="viewHeaderTemplate">
            <StackPanel Background="Green"
    Width="2000"
    VerticalAlignment="Stretch" 
    HorizontalAlignment="Stretch"
    Orientation="Vertical">
                <TextBlock 
    HorizontalAlignment="Left" 
    Margin="20,0,0,0" 
    Foreground="#FFFFFF"
    FontFamily="Arial"
    Text="{Binding DateText}"
    FontSize="25"
    TextTrimming="CharacterEllipsis"
    TextWrapping="Wrap" />
                <TextBlock 
    HorizontalAlignment="Left"  Margin="20,0,0,0" 
    Foreground="#FFFFFF"
    FontFamily="Arial"
    Text="{Binding DayText}"
    FontSize="10"
    TextTrimming="CharacterEllipsis"
    TextWrapping="Wrap" />
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
 
    <Window.DataContext>
        <local:SchedulerViewModel/>
    </Window.DataContext>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition  Width="Auto"/>
        </Grid.ColumnDefinitions>
        <syncfusion:SfScheduler x:Name="Schedule" 
                           ViewType="{Binding ElementName=viewTypeComboBox, Path=SelectedValue}" 
                            ItemsSource="{Binding Meetings}">
            <syncfusion:SfScheduler.TimelineViewSettings>
                <syncfusion:TimelineViewSettings
            ViewHeaderTemplate="{StaticResource viewHeaderTemplate}" >
                </syncfusion:TimelineViewSettings>
            </syncfusion:SfScheduler.TimelineViewSettings>
            <syncfusion:SfScheduler.MonthViewSettings>
                <syncfusion:MonthViewSettings
            ViewHeaderTemplate="{StaticResource viewHeaderTemplate}"
                ViewHeaderHeight="60">
                </syncfusion:MonthViewSettings>
            </syncfusion:SfScheduler.MonthViewSettings>
            <syncfusion:SfScheduler.DaysViewSettings>
                <syncfusion:DaysViewSettings
                ViewHeaderTemplate="{StaticResource viewHeaderTemplate}" >
                </syncfusion:DaysViewSettings>
            </syncfusion:SfScheduler.DaysViewSettings>
            <syncfusion:SfScheduler.AppointmentMapping>
                <syncfusion:AppointmentMapping
             StartTime="From"
            EndTime="To"
            AppointmentBackground="color"
            Subject="EventName">
                </syncfusion:AppointmentMapping>
            </syncfusion:SfScheduler.AppointmentMapping>
        </syncfusion:SfScheduler>
        <StackPanel Grid.Column="1"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    Margin="0,20,25,0">
            <ComboBox x:Name="viewTypeComboBox" ItemsSource="{Binding Source={StaticResource schedulerViewTypes}}"
                            SelectedIndex="2"  Width="100"/>
        </StackPanel>
    </Grid>
</Window>

View sample in GitHub

Demo image view header month