How to customize the header view of Calendar in Xamarin.Forms?
You can customize the header view of the SfCalendar in Xamarin.Forms control by following ways,
- Using HeaderView property
- By passing the custom header view in OnHeaderLoaded event.
Using HeaderView property
You can customize the header view by loading the content in HeaderView property of SfCalendar.
XAML
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:LocalNamespace="clr-namespace:GettingStartedKBSyncfusion"
xmlns:Syncfusion ="clr-namespace:Syncfusion.SfCalendar.XForms;assembly=Syncfusion.SfCalendar.XForms"
x:Class="GettingStartedKBSyncfusion.MainPage">
<ContentPage.Content>
<Syncfusion:SfCalendar x:Name="calendar">
<Syncfusion:SfCalendar.HeaderView>
<Grid BackgroundColor="#E0CCFF">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="Left.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding LeftCommand}" />
</Image.GestureRecognizers>
</Image>
<Label Text="{Binding SelectedMonth}" FontSize="18" Grid.Column="1" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
<Image Source="Right.png" Grid.Column="2">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding RightCommand}" />
</Image.GestureRecognizers>
</Image>
</Grid>
</Syncfusion:SfCalendar.HeaderView>
</Syncfusion:SfCalendar>
</ContentPage.Content>
</ContentPage>
Passing custom header view in OnHeaderLoaded event
You can change the header view by setting the content to CalendarHeaderEventArgs.View property in OnHeaderLoaded event.
C#
calendar.OnHeaderLoaded += (object sender, CalendarHeaderEventArgs args) =>
{
Grid grid = new Grid();
grid.BackgroundColor = Color.FromHex("#E0CCFF");
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star });
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star });
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star });
Image leftImage = new Image();
leftImage.Source = "Left.png";
Image rightImage = new Image();
rightImage.Source = "Right.png";
TapGestureRecognizer leftTap = new TapGestureRecognizer();
TapGestureRecognizer rightTap = new TapGestureRecognizer();
leftImage.GestureRecognizers.Add(leftTap);
rightImage.GestureRecognizers.Add(rightTap);
leftTap.Tapped += LeftHandleAction;
rightTap.Tapped += RightHandleAction;
Label label = new Label();
label.SetBinding(Label.TextProperty, "SelectedMonth");
label.FontSize = 18;
label.HorizontalOptions = LayoutOptions.Center;
label.VerticalOptions = LayoutOptions.Center;
grid.Children.Add(leftImage, 0, 0);
grid.Children.Add(label, 1, 0);
grid.Children.Add(rightImage, 2, 0);
args.View = grid;
};
Output
|
I hope you enjoyed learning about how to customize the header view of Calendar in Xamarin.Forms.
You can refer to our Xamarin.Forms Calendar feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Xamarin.Forms Calendar example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
