# Customizing Header

## Content



The [C1 Calendar](/componentone/api/xamarin/online-android/dotnet-api/C1.Android.Calendar/C1.Android.Calendar.C1Calendar.html) control shows a default header that displays the current month or year and navigation buttons. However, users can hide or remove the default header by setting the [ShowHeader](/componentone/api/xamarin/online-android/dotnet-api/C1.Android.Calendar/C1.Android.Calendar.C1Calendar.ShowHeader.html) property to False, and apply a custom header.

The following image shows a Xamarin Calendar with a custom header.

![](https://cdn.mescius.io/document-site-files/images/b011ec9b-8b9c-49b7-96b6-ebd2d5673a5e/images/calendar_customheader.png)

On tapping the **Month** label, the calendar provides option to switch to month or year mode. The **Today** label navigates the calendar to the current day.

The following code example demonstrates how to create and apply a custom header in Xamarin Calendar control in C#. This example uses the sample created in [Quick Start](/componentone/docs/xamarin/online-android/controls/CalendarOverview/CalendarQuickStart) section.

### In Code

Complete the following steps to customize the header for the Xamarin Calendar control.

1.  Add the following import statements in the **MainActivity** class.
    
    ```csharp
    using Android.App;
    using Android.Content.PM;
    using Android.OS;
    using Android.Views;
    using Android.Widget;
    using System;
    ```
    
2.  Replace the existing code in the MainActivity class with the code given below.
    
    ```csharp
    public class MainActivity : Activity
        {
            private TextView monthLabel;
            private Spinner viewModeSpinner;
            private Button todayButton;
            private C1Calendar calendar;
            protected override void OnCreate(Bundle bundle)
            {
                base.OnCreate(bundle);
                ActionBar.SetDisplayHomeAsUpEnabled(true);
                SetContentView(Resource.Layout.CustomHeader);
                viewModeSpinner = FindViewById<Spinner>(Resource.Id.ViewModeSpinner);
                todayButton = FindViewById<Button>(Resource.Id.TodayButton);
                calendar = FindViewById<C1Calendar>(Resource.Id.Calendar);
                monthLabel = FindViewById<TextView>(Resource.Id.MonthLabel);
                todayButton.Click += OnTodayClicked;
                var items = new CalendarViewMode[] { CalendarViewMode.Month, CalendarViewMode.Year, CalendarViewMode.Decade };
                var adapterItems = Resources.GetStringArray(Resource.Array.viewModeSpinnerValues);
                viewModeSpinner.Adapter = new ArrayAdapter(BaseContext, global::Android.Resource.Layout.SimpleListItem1, adapterItems);
                viewModeSpinner.ItemSelected += OnModeChanged;
                calendar.ViewModeChanged += OnViewModeChanged;
                calendar.DisplayDateChanged += OnDisplayDateChanged;
                UpdateMonthLabel();
            }
            private async void OnModeChanged(object sender, AdapterView.ItemSelectedEventArgs e)
            {
                switch (viewModeSpinner.SelectedItemPosition)
                {
                    case 0:
                        await calendar.ChangeViewModeAsync(CalendarViewMode.Month);
                        break;
                    case 1:
                        await calendar.ChangeViewModeAsync(CalendarViewMode.Year);
                        break;
                    case 2:
                        await calendar.ChangeViewModeAsync(CalendarViewMode.Decade);
                        break;
                }
            }
            private async void OnTodayClicked(object sender, System.EventArgs e)
            {
                await calendar.ChangeViewModeAsync(CalendarViewMode.Month, DateTime.Today);
                calendar.SelectedDate = DateTime.Today;
            }
            private void OnViewModeChanged(object sender, EventArgs e)
            {
                switch (calendar.ViewMode)
                {
                    case CalendarViewMode.Month:
                        viewModeSpinner.SetSelection(0);
                        break;
                    case CalendarViewMode.Year:
                        viewModeSpinner.SetSelection(1);
                        break;
                    case CalendarViewMode.Decade:
                        viewModeSpinner.SetSelection(2);
                        break;
                }
            }
            private void OnDisplayDateChanged(object sender, EventArgs e)
            {
                UpdateMonthLabel();
            }
            private void UpdateMonthLabel()
            {
                monthLabel.Text = calendar.DisplayDate.ToString("Y");
            }
            public override bool OnOptionsItemSelected(IMenuItem item)
            {
                if (item.ItemId == global::Android.Resource.Id.Home)
                {
                    Finish();
                    return true;
                }
                else
                {
                    return base.OnOptionsItemSelected(item);
                }
            }
        }
    ```
    
3.  Add the following XML code in the Main.axml, to render the control onto the device.
    
    ```MAIN.AXML
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:calendar="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical"
        android:weightSum="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0">
            <Spinner
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.5"
                android:id="@+id/ViewModeSpinner" />
            <Button
                android:text="Today"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0.5"
                android:id="@+id/TodayButton" />
        </LinearLayout>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:id="@+id/MonthLabel"
            android:gravity="center"
            android:text="July 2016"
            android:textSize="20dip"
            android:layout_margin="4dip" />
        <c1.android.calendar.C1Calendar
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:id="@+id/Calendar"
            calendar:c1_showHeader="false" />
    </LinearLayout>
    ```