Articles in this section
Category / Section

How to create custom header and view header in Xamarin.Forms Schedule?

3 mins read

You can create custom header and add this in schedule. To achieve this, follow below steps.

Step 1: Set Schedule.HeaderHeight and Schedule.ViewHeaderHeight property as zero to hide the default headers.

Step 2: Create your custom header using any container (Eg: StackLayout, Grid..)

Step 3: Using Schedule.VisibleDatesChanged event get the visible month, and set this to the custom header

Please find the code snippet below for Month View:

XAML

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.1*"/>
            <RowDefinition Height="0.1*"/>
            <RowDefinition Height="0.8*"/>
        </Grid.RowDefinitions>
 
        <Label x:Name="Header" Grid.Row="0" VerticalOptions="Center"/>
        <Grid  Grid.Row="1" BackgroundColor="#009688">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Label Text="Sun" Grid.Column="0" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            <Label Text="Mon" Grid.Column="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            <Label Text="Tue" Grid.Column="2" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            <Label Text="Wed" Grid.Column="3" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            <Label Text="Thu" Grid.Column="4" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            <Label Text="Fri" Grid.Column="5" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            <Label Text="Sat" Grid.Column="6" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
        </Grid>
        <schedule:SfSchedule x:Name="schedule" Grid.Row="" 
                             ScheduleView="MonthView" 
                             VerticalOptions="FillAndExpand" 
                             HorizontalOptions="FillAndExpand"
                             HeaderHeight="0"
                             ViewHeaderHeight="0"/>
        <Grid.Behaviors>
            <local:ScheduleBehavior/>
        </Grid.Behaviors>
    </Grid
 

 

For Week view, you need to add one more label for timeslot labels in the left side.

XAML

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.1*"/>
            <RowDefinition Height="0.1*"/>
            <RowDefinition Height="0.8*"/>
        </Grid.RowDefinitions>
 
        <Label x:Name="Header" TextColor="Black" Grid.Row="0" VerticalOptions="Center"/>
        <Grid  Grid.Row="1" BackgroundColor="#009688">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="1" x:Name="Sunday">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.7*"/>
                    <RowDefinition Height="0.3*"/>
                </Grid.RowDefinitions>
                <Label x:Name="SundayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                <Label x:Name="SundayLabel" Text="Sun" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            </Grid>
            <Grid Grid.Column="2" x:Name="Monday">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.7*"/>
                    <RowDefinition Height="0.3*"/>
                </Grid.RowDefinitions>
                <Label x:Name="MondayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                <Label x:Name="MondayLabel" Text="Mon" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            </Grid>
            <Grid Grid.Column="3" x:Name="Tuesday">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.7*"/>
                    <RowDefinition Height="0.3*"/>
                </Grid.RowDefinitions>
                <Label x:Name="TuesdayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                <Label x:Name="TuesdayLabel" Text="Tue" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            </Grid>
            <Grid Grid.Column="4" x:Name="Wednesday">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.7*"/>
                    <RowDefinition Height="0.3*"/>
                </Grid.RowDefinitions>
                <Label x:Name="WednesdayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                <Label x:Name="WednesdayLabel" Text="Wed" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            </Grid>
            <Grid Grid.Column="5" x:Name="Thursday">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.7*"/>
                    <RowDefinition Height="0.3*"/>
                </Grid.RowDefinitions>
                <Label x:Name="ThursdayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                <Label x:Name="ThursdayLabel" Text="Thu" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            </Grid>
            <Grid Grid.Column="6" x:Name="Friday">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.7*"/>
                    <RowDefinition Height="0.3*"/>
                </Grid.RowDefinitions>
                <Label x:Name="FridayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                <Label x:Name="FridayLabel" Text="Fri" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            </Grid>
            <Grid Grid.Column="7" x:Name="Saturday">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.7*"/>
                    <RowDefinition Height="0.3*"/>
                </Grid.RowDefinitions>
                <Label x:Name="SaturdayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                <Label x:Name="SaturdayLabel" Text="Sat" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            </Grid>
        </Grid>
        <schedule:SfSchedule x:Name="schedule" Grid.Row="2" 
                             ScheduleView="WeekView" 
                             VerticalOptions="FillAndExpand" 
                             HorizontalOptions="FillAndExpand"
                             HeaderHeight="0"
                             ViewHeaderHeight="0"/>
    </Grid>
 

 

For Work Week view, you need to remove the nonworking days label

XAML

<Grid> 
        <Grid.RowDefinitions>
            <RowDefinition Height="0.1*"/>
            <RowDefinition Height="0.1*"/>
            <RowDefinition Height="0.8*"/>
        </Grid.RowDefinitions>
 
        <Label x:Name="Header" TextColor="Black" Grid.Row="0" VerticalOptions="Center"/>
        <Grid  Grid.Row="1" BackgroundColor="#009688">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="1" x:Name="Monday">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.7*"/>
                    <RowDefinition Height="0.3*"/>
                </Grid.RowDefinitions>
                <Label x:Name="MondayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                <Label x:Name="MondayLabel" Text="Mon" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            </Grid>
            <Grid Grid.Column="2" x:Name="Tuesday">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.7*"/>
                    <RowDefinition Height="0.3*"/>
                </Grid.RowDefinitions>
                <Label x:Name="TuesdayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                <Label x:Name="TuesdayLabel" Text="Tue" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            </Grid>
            <Grid Grid.Column="3" x:Name="Wednesday">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.7*"/>
                    <RowDefinition Height="0.3*"/>
                </Grid.RowDefinitions>
                <Label x:Name="WednesdayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                <Label x:Name="WednesdayLabel" Text="Wed" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            </Grid>
            <Grid Grid.Column="4" x:Name="Thursday">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.7*"/>
                    <RowDefinition Height="0.3*"/>
                </Grid.RowDefinitions>
                <Label x:Name="ThursdayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                <Label x:Name="ThursdayLabel" Text="Thu" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            </Grid>
            <Grid Grid.Column="5" x:Name="Friday">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.7*"/>
                    <RowDefinition Height="0.3*"/>
                </Grid.RowDefinitions>
                <Label x:Name="FridayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                <Label x:Name="FridayLabel" Text="Fri" Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            </Grid>
        </Grid>
        <schedule:SfSchedule x:Name="schedule" Grid.Row="2" 
                             ScheduleView="WorkWeekView" 
                             VerticalOptions="FillAndExpand" 
                             HorizontalOptions="FillAndExpand"
                             HeaderHeight="0"
                             ViewHeaderHeight="0"/>
    </Grid>

 

For Day View, make sure to have only one label

XAML

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.1*"/>
            <RowDefinition Height="0.1*"/>
            <RowDefinition Height="0.8*"/>
        </Grid.RowDefinitions>
 
        <Label x:Name="Header" TextColor="Black" Grid.Row="0" VerticalOptions="Center"/>
        <Grid  Grid.Row="1" BackgroundColor="#009688">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" x:Name="Monday">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.7*"/>
                    <RowDefinition Height="0.3*"/>
                </Grid.RowDefinitions>
                <Label x:Name="MondayDateLabel" Grid.Row="0" TextColor="Wheat" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                <Label x:Name="MondayLabel"  Grid.Row="1" TextColor="White" VerticalTextAlignment="End" HorizontalTextAlignment="Center"/>
            </Grid>
        </Grid>
        <schedule:SfSchedule x:Name="schedule" Grid.Row="2" 
                             ScheduleView="DayView" 
                             VerticalOptions="FillAndExpand" 
                             HorizontalOptions="FillAndExpand"
                             HeaderHeight="0"
                             ViewHeaderHeight="0"/>
    </Grid>

 

Get dates and day value for view header using Schedule.VisibleDatesChangedEvent and set this text to label

C#

private void Schedule_VisibleDatesChangedEvent(object sender, VisibleDatesChangedEventArgs e)
        {
            if (schedule.ScheduleView == ScheduleView.DayView)
            { 
                Header.Text = e.visibleDates[0].ToString("MMMM yyyy");
                 
                // Sets the current date and day value for view header label
                sunday.FindByName<Label>("SundayDateLabel").Text = e.visibleDates[0].Day.ToString();
                sunday.FindByName<Label>("SundayLabel").Text = e.visibleDates[0].DayOfWeek.ToString();
            }
        }

 

Example: CustomHeaderForWeekView

Chart

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied