Articles in this section
Category / Section

How to customize the header view of Calendar in Xamarin.Forms?

2 mins read

You can customize the header view of the SfCalendar in Xamarin.Forms control by following ways,  

  1. Using HeaderView property
  2. 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.


<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="" 
xmlns:Syncfusion ="clr-namespace:Syncfusion.SfCalendar.XForms;assembly=Syncfusion.SfCalendar.XForms"
<Syncfusion:SfCalendar x:Name="calendar">
        <Grid BackgroundColor="#E0CCFF">
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            <Image Source="Left.png">
                    <TapGestureRecognizer Command="{Binding LeftCommand}" />
            <Label Text="{Binding SelectedMonth}" FontSize="18" Grid.Column="1" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
            <Image Source="Right.png" Grid.Column="2">
                    <TapGestureRecognizer Command="{Binding RightCommand}" />

View sample in GitHub

Passing custom header view in OnHeaderLoaded event

You can change the header view by setting the content to CalendarHeaderEventArgs.View property in OnHeaderLoaded event.


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();
 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;

View sample in GitHub


custom header view



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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

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