Header in WinUI Scheduler (SfScheduler)

18 May 20212 minutes to read

Change the header height, date format, and appearance of SfScheduler.

Header height

Change the scheduler header height by using the HeaderHeight property of SfScheduler. By default, the header height is 50.

<scheduler:SfScheduler x:Name="Schedule" 
                       HeaderHeight="100">
</scheduler:SfScheduler>
this.Schedule.HeaderHeight = 100;

change-header-height-in-winui-scheduler-timeslot-view

Header date format

Change the Scheduler header date format of scheduler by using the HeaderDateFormat property of SfScheduler. By default, the header date format is MMMM yyyy.

<scheduler:SfScheduler x:Name="Schedule" HeaderDateFormat="MMM-yyyy">
</scheduler:SfScheduler>
this.Schedule.HeaderDateFormat = "MMM-yyyy";

customize-header-date-format-in-winui-scheduler-timeslot-view

Appearance customization

Style the Scheduler header appearance using the SchedulerHeaderControl in the scheduler. Change the background color, textStyle, borderBrush, and more by setting the style property for SchedulerHeaderControl.

<Grid>
    <Grid.Resources>
        <Style TargetType="scheduler:SchedulerHeaderControl">
            <Setter Property="Background" Value="#f08a5d"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontStyle" Value="Italic"/>
            <Setter Property="BorderBrush" Value="BlueViolet"/>
            <Setter Property="BorderThickness" Value="2"/>
        </Style>
    </Grid.Resources>

    <scheduler:SfScheduler x:Name="Schedule">
    </scheduler:SfScheduler>
</Grid>

customize-the-scheduler-header-appearance-in-winui-scheduler-timeslot-view

Customize header appearance using DataTemplate

Customize the header appearance of scheduler by using the HeaderTemplate property of SfScheduler.

<scheduler:SfScheduler x:Name="Schedule">
    <scheduler:SfScheduler.HeaderTemplate>
        <DataTemplate>
                <TextBlock FontStyle="Italic"
                           Foreground="#8551F2"
                           FontSize="25"
                           Text="{Binding}"/>
        </DataTemplate>
    </scheduler:SfScheduler.HeaderTemplate>
</scheduler:SfScheduler>

customize-the-scheduler-header-appearance-using data-template-in-winui-scheduler-timeslot-view