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
Did not find the solution
Contact Support
FA
Faith Atieno Awiti
Hi Thahira Banu Nainar Mohammed ,
I have updated H1 title, meta title, meta description,