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
