We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize the header view of Calendar in Xamarin.Forms (SfCalendar)

Platform: Xamarin.Forms |
Control: SfCalendar |
Published Date: March 20, 2018 |
Last Revised Date: March 20, 2020

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.

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>

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.

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;
}; 

View sample in GitHub

Output

custom header view

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon