Category / Section
How to customize Calendar Header?
1 min read
Syncfusion Calendar provides the support for Customizing the Calendar Header View in Xamarin. You can able to customize the header view of the SfCalendar by using HeaderView property.
The following code illustrates the way to achieve this support.
XAML code:
<ContentPage.Content> <Grid x:Name="Mainlayout" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> <syncfusion:SfCalendar x:Name="calendar"> <syncfusion:SfCalendar.HeaderView> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="2*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Label x:Name="Month" Text="Month" FontAttributes="Bold" Grid.Column="0" HorizontalOptions="End" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" /> <Label x:Name="Year" Text="year" FontAttributes="Bold" Grid.Column="1" HorizontalOptions="Start" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" /> <Button Grid.Column="2" x:Name="Left" BackgroundColor="Transparent" HorizontalOptions="End" Clicked=" Left_Clicked"/> <Button Grid.Column="3" x:Name="Right" BackgroundColor="Transparent" HorizontalOptions="Start" Clicked="Right_Clicked"/> </Grid> </syncfusion:SfCalendar.HeaderView> </syncfusion:SfCalendar> </Grid> </ContentPage.Content>
Month data will be retrieved from the OnMonthChanged event of SfCalendar.
namespace CalendarSample
{
public partial class CalendarSamplePage : ContentPage
{
public CalendarSamplePage()
{
InitializeComponent();
Month.Text = System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(calendar.MoveToDate.Month);
Year.Text = calendar.MoveToDate.Year.ToString();
calendar.MonthChanged += Calendar_MonthChanged;
Left.Image = (Xamarin.Forms.FileImageSource)ImageSource.FromFile("CircledArrowLeft.png");
Right.Image = (Xamarin.Forms.FileImageSource)ImageSource.FromFile("CircledArrowRight.png");
// to handle padding in iPhone10
if (Device.OS == TargetPlatform.iOS)
{
Mainlayout.Padding = new Thickness(0, 50, 0, 0);
}
if (Device.OS == TargetPlatform.Android)
{
Month.FontSize = 20;
Year.FontSize = 20;
}
}
/// <summary>
/// Calendars the month changed.
/// </summary>
/// <param name="sender">Sender.</param>
/// <param name="args">Arguments.</param>
void Calendar_MonthChanged(object sender, MonthChangedEventArgs args)
{
Month.Text = System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(args.args.CurrentValue.Month);
Year.Text = args.args.CurrentValue.Year.ToString();
}
/// <summary>
/// Navigate to Previous Month.
/// </summary>
/// <param name="sender">Sender.</param>
/// <param name="e">E.</param>
void Left_Clicked(object sender, System.EventArgs e)
{
calendar.Backward();
}
/// <summary>
/// Navigate to Next Month.
/// </summary>
/// <param name="sender">Sender.</param>
/// <param name="e">E.</param>
void Right_Clicked(object sender, System.EventArgs e)
{
calendar.Forward();
}
}
}
C#:
namespace CalendarSample
{
public partial class CalendarSamplePage : ContentPage
{
private SfCalendar calendar;
private Label Month, Year;
public CalendarSamplePage()
{
InitializeComponent();
calendar = new SfCalendar();
var grid = new Grid
{
ColumnDefinitions =
{
new ColumnDefinition{ Width= new GridLength(2,GridUnitType.Star)},
new ColumnDefinition{ Width=GridLength.Star },
new ColumnDefinition{ Width=GridLength.Star },
new ColumnDefinition{ Width=GridLength.Star }
}
};
Month = new Label();
Month.HorizontalOptions = LayoutOptions.End;
Month.HorizontalTextAlignment = TextAlignment.Start;
Month.VerticalTextAlignment = TextAlignment.Center;
Month.FontAttributes = FontAttributes.Bold;
Year = new Label();
Year.HorizontalOptions = LayoutOptions.Start;
Year.HorizontalTextAlignment = TextAlignment.Start;
Year.VerticalTextAlignment = TextAlignment.Center;
Year.FontAttributes = FontAttributes.Bold;
Button Left = new Button();
Left.BackgroundColor = Color.Transparent;
Left.HorizontalOptions = LayoutOptions.End;
Left.Clicked += Left_Clicked;
Button Right = new Button();
Right.BackgroundColor = Color.Transparent;
Right.HorizontalOptions = LayoutOptions.End;
Right.Clicked += Right_Clicked;
grid.Children.Add(Month, 0, 0);
grid.Children.Add(Year, 1, 0);
grid.Children.Add(Left, 2, 0);
grid.Children.Add(Right, 3, 0);
calendar.HeaderView = grid;
Month.Text = System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(calendar.MoveToDate.Month);
Year.Text = calendar.MoveToDate.Year.ToString();
calendar.MonthChanged += Calendar_MonthChanged;
Left.Image = (Xamarin.Forms.FileImageSource)ImageSource.FromFile("CircledArrowLeft.png");
Right.Image = (Xamarin.Forms.FileImageSource)ImageSource.FromFile("CircledArrowRight.png");
Grid MainLayout = new Grid();
MainLayout.Children.Add(calendar);
// to handle padding in iPhone10
if (Device.OS == TargetPlatform.iOS)
{
MainLayout.Padding = new Thickness(0, 50, 0, 0);
}
if (Device.OS == TargetPlatform.Android)
{
Month.FontSize = 20;
Year.FontSize = 20;
}
this.Content = MainLayout;
}
/// <summary>
/// Calendars the month changed.
/// </summary>
/// <param name="sender">Sender.</param>
/// <param name="args">Arguments.</param>
void Calendar_MonthChanged(object sender, MonthChangedEventArgs args)
{
Month.Text = System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(args.args.CurrentValue.Month);
Year.Text = args.args.CurrentValue.Year.ToString();
}
/// <summary>
/// Navigate to Previous Month.
/// </summary>
/// <param name="sender">Sender.</param>
/// <param name="e">E.</param>
void Left_Clicked(object sender, System.EventArgs e)
{
calendar.Backward();
}
/// <summary>
/// Navigate to Next Month.
/// </summary>
/// <param name="sender">Sender.</param>
/// <param name="e">E.</param>
void Right_Clicked(object sender, System.EventArgs e)
{
calendar.Forward();
}
}
}
Image for Header Customization in SfCalendar:
|
Please find the sample from the below link, Sample Link: HeaderViewCustomization
