SfCalendar show month on the first day

[Ernest]

Hi,

I'm trying to achieve similar to Microsoft Outlook app as in image below:

As you can see on 1 Dec 2021 cell it displays Dec. 1 and on 1 Jan 2022 it shows Jan.1 2022.

I've tried using OnMonthCellLoaded event which provides MonthCellLoadedEventArgs, but it does not allow to change day label text directly, only via setting View, but if I set View I loose all other day cell functionality like displaying appointment indicator dots etc.

If I would implement custom view or template, how can I get appointment indicators to be shown? Is there a binding for them?

[SaiGanesh Sakthivel]

Hi Ernest, 

 

Thank you for using Syncfusion products. 

 

#Regarding Customize the first day of the month 

We have checked the reported query from end. As of now, we do not have support to customize the default existing month cell view label. But you can customize the particular day cell view in the view. Please refer to the following code snippet for your reference. 

 

Code snippet 

private void Calendar_OnMonthCellLoaded(object sender, MonthCellLoadedEventArgs e) 

{ 

    if (e.Date.Day == 1) 

    { 

        var stack = new StackLayout(); 

        var month = new Label(); 

        month.Text = Month[e.Date.Month - 1]; 

        month.HorizontalTextAlignment = TextAlignment.Center; 

        month.VerticalTextAlignment = TextAlignment.End; 

        month.HorizontalOptions = LayoutOptions.FillAndExpand; 

        month.VerticalOptions = LayoutOptions.FillAndExpand; 

        month.TextColor = e.TextColor; 

        month.BackgroundColor = e.BackgroundColor; 

        var day = new Label(); 

        day.Text = e.Date.Day.ToString(); 

        day.BackgroundColor = e.BackgroundColor; 

        day.TextColor = e.TextColor; 

        day.HorizontalTextAlignment = TextAlignment.Center; 

        day.VerticalTextAlignment = TextAlignment.Center; 

        day.HorizontalOptions = LayoutOptions.FillAndExpand; 

        day.VerticalOptions = LayoutOptions.FillAndExpand; 

        var year = new Label(); 

        year.Text = e.Date.Year.ToString(); 

        year.TextColor = e.TextColor; 

        year.BackgroundColor = e.BackgroundColor; 

        year.HorizontalTextAlignment = TextAlignment.Center; 

        year.VerticalTextAlignment = TextAlignment.Start; 

        year.HorizontalOptions = LayoutOptions.FillAndExpand; 

        year.VerticalOptions = LayoutOptions.FillAndExpand; 

 

        stack.Children.Add(month); 

        stack.Children.Add(day); 

        stack.Children.Add(year); 

        stack.BackgroundColor = e.BackgroundColor; 

        e.View = stack; 

    } 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CalendarXamarin-787951689 

 

Output 

 

 

Please let us know if you have any concerns. 

 

Regards,
SaiGanesh Sakthivel