Differences in customization cells between tablets and smartphones

[Lolo Rodri]

Good morning,I was trying to customize cells from my SfCalendar but somehow I realize that customization look is different between tablet and smartphone. How could it be the same? To clear out, it looks like the blackout dates have different size even in the customization code I set font size from MonthSettingsView.

View:

                            <synccalendar:SfCalendar x:Name="CalendarFromTo" ViewMode="MonthView" ShowNavigationButtons="True"

                                SelectionMode="SingleSelection"

                                MinDate="{Binding MinDate, Mode=OneWay}" MaxDate="{Binding MaxDate, Mode=OneWay}"

                                FirstDayofWeek="1"

                                BlackoutDates="{Binding BlackoutDates, Mode=OneWay}"

                                OnMonthCellLoaded="CalendarFromTo_OnMonthCellLoaded">

                                <synccalendar:SfCalendar.MonthViewSettings>

                                    <synccalendar:MonthViewSettings HeaderFontAttributes="Bold"

                                        TodaySelectionBackgroundColor="{DynamicResource PrimaryColor}" TodaySelectionTextColor="White"

                                        DateSelectionColor="{DynamicResource PrimaryColor}" SelectedDayTextColor="White" NavigationPage.HasNavigationBar="True"

                                    />

                                </synccalendar:SfCalendar.MonthViewSettings>

                            </synccalendar:SfCalendar>

Behind:

private void CalendarFromTo_OnMonthCellLoaded(object sender, MonthCellLoadedEventArgs e)

{

var calendar = sender as SfCalendar;

Label text = new Label();

if (calendar.BlackoutDates.Contains(e.Date.Date))

{

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

text.TextColor = Color.Gray;

text.BackgroundColor = Color.Transparent;

text.TextDecorations = TextDecorations.None;

text.HorizontalTextAlignment = TextAlignment.Center;

text.VerticalTextAlignment = TextAlignment.Center;

text.VerticalOptions = LayoutOptions.FillAndExpand;

text.HorizontalOptions = LayoutOptions.FillAndExpand;

text.FontSize = calendar.MonthViewSettings.DayFontSize;

e.View = text;

}

else if (e.IsCurrentMonth && e.Date >= calendar.MinDate && e.Date <= calendar.MaxDate)

{

e.FontAttribute = FontAttributes.Bold;

}

}

Result in Smartphone:

Result in Tablet:

[Muniappan Subramanian]

Hi Lolo,  

 

Thank you for using Syncfusion products. 

 

We checked your reported issue “Differences in customization cells between tablets and smartphones”. We set DateFontSize in SfCalendar based on the density value, thus you'll need to do the same with text size. We’ve prepared the sample for the same. Please find the link below for the sample,  

 

Code Snippet: 

private void Calendar_OnMonthCellLoaded(object sender, MonthCellLoadedEventArgs e) 

{ 

    var calendar = sender as SfCalendar; 

    Label text = new Label(); 

    Grid grid = new Grid(); 

    if (calendar.BlackoutDates.Contains(e.Date.Date)) 

    { 

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

        text.TextColor = Color.Gray; 

        text.BackgroundColor = Color.Transparent; 

        text.TextDecorations = TextDecorations.None; 

        text.HorizontalTextAlignment = TextAlignment.Center; 

        text.VerticalTextAlignment = TextAlignment.Center; 

        text.VerticalOptions = LayoutOptions.FillAndExpand; 

        text.HorizontalOptions = LayoutOptions.FillAndExpand; 

        if (Device.Idiom == TargetIdiom.Tablet && Device.RuntimePlatform == Device.Android) 

        { 

            text.FontSize = calendar.MonthViewSettings.DayFontSize * 1.4; 

        } 

        else 

        { 

            text.FontSize = calendar.MonthViewSettings.DayFontSize; 

        } 

 

        grid.Children.Add(text); 

        e.View = grid; 

    } 

 

    else if (e.IsCurrentMonth && e.Date >= calendar.MinDate && e.Date <= calendar.MaxDate) 

    { 

        e.FontAttribute = FontAttributes.Bold; 

    } 

} 

 

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

 

We hope that this helps you, kindly revert us if you have any concern.  

 

Regards, 

Muniappan S. 

[Lolo Rodri]

Good morning Muniappan,

Thats what I need! I implemented and it works, thanks for you quickly help. 

Have a nice day :)

[Muniappan Subramanian]

Hi Lolo, 

 

Thank you for the update. 

 

We are glad that our solution meets your requirement. Please let us know if you need any further update. As always, we are happy to help you out. 

 

Regards, 

Muniappan S.