Different UI For iOS and android with same settings

[Ján Sochor]

Hello, I am trying to implement SfCalendar component to my Xamarin app both for Android and iOS.
I run to a one problem where my design doesn't look same.

I want to have design on left (iOS) but it doesnt look like that on Android.

<calendar:SfCalendar
                Background="Transparent"
                BackgroundColor="Transparent"
                SelectionMode="RangeSelection"
                FirstDayofWeek="1"
                SelectedRange="{Binding DateRange, Mode=TwoWay}"
                x:Name="calendar">
                <calendar:SfCalendar.MonthViewSettings>
                    <calendar:MonthViewSettings
                CurrentMonthBackgroundColor="Transparent"
                CurrentMonthTextColor="{StaticResource AsolNormalColor}"
                PreviousMonthBackgroundColor="Transparent"
                PreviousMonthTextColor="Gray"
                DateSelectionColor="{StaticResource AsolBlueColor}"
                SelectedDayTextColor="{StaticResource AsolNormalColor}"
                DayHeaderFormat="EEEEE"
                DayFontSize="12"
                DayHeaderFontSize="14"
                DayHeaderBackgroundColor="Transparent"
                        DayHeaderTextColor="{StaticResource AsolBlueColor}"
                SelectionRadius="15"
                TodaySelectionTextColor="{StaticResource AsolNormalColor}"
                TodaySelectionBackgroundColor="Transparent"
                HeaderBackgroundColor="{StaticResource AsolWhiteColor}"
                HeaderFontAttributes="Bold"
                HeaderFontSize="16"
                        HeaderTextColor="{StaticResource AsolBlueColor}"
                WeekEndTextColor="{StaticResource AsolNormalColor}"
                WeekEndBackgroundColor="Transparent"/>
                    </calendar:SfCalendar.MonthViewSettings>
            </calendar:SfCalendar>

Here's my code for the SfCalendar control.
Tried to play with other settings but nothing seems to work.
Thanks for the reply

[Swetha Srikumar]

Hi Jan,

#Regarding Different UI for iOS and Android with same settings

we could not replicate the reported scenario from our side. We have prepared the sample as per the given information and checked the sample from our end. We have attached the tested sample in the following link for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CalendarXamarin655372444

Android

iOS

Please check the sample and let us know if you still facing the same issue? If not, please modify our sample based on your scenario which could be helpful for us to check on it and provide you the solution at the earliest.

Regards,
SaiGanesh Sakthivel

[Ján Sochor]

Hello. I checked the sample and the issue is the same.

I updated MainPage.xaml to:

<?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:local="clr-namespace:CalendarXamarin"
             xmlns:calendar="clr-namespace:Syncfusion.SfCalendar.XForms;assembly=Syncfusion.SfCalendar.XForms"
             x:Class="CalendarXamarin.MainPage">
    <RelativeLayout Background="Red">
        <Grid RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=0}"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=0}">
            <calendar:SfCalendar
                Margin="10"
                Background="Transparent"
                BackgroundColor="Transparent"
                SelectionMode="RangeSelection"
                FirstDayofWeek="1"
                x:Name="calendar">
                <calendar:SfCalendar.MonthViewSettings>
                    <calendar:MonthViewSettings
                        CurrentMonthBackgroundColor="Transparent"
                        CurrentMonthTextColor="Black"
                        PreviousMonthBackgroundColor="Transparent"
                        PreviousMonthTextColor="Gray"
                        DateSelectionColor="Blue"
                        SelectedDayTextColor="Black"
                        DayHeaderFormat="EEEEE"
                        DayFontSize="12"
                        DayHeaderFontSize="14"
                        DayHeaderBackgroundColor="Transparent"
                        DayHeaderTextColor="Blue"
                        SelectionRadius="15"
                        TodaySelectionTextColor="Black"
                        TodaySelectionBackgroundColor="Transparent"
                        HeaderBackgroundColor="White"
                        HeaderFontAttributes="Bold"
                        HeaderFontSize="16"
                        HeaderTextColor="Blue"
                        WeekEndTextColor="Black"
                        WeekEndBackgroundColor="Transparent"/>
                </calendar:SfCalendar.MonthViewSettings>
            </calendar:SfCalendar>
        </Grid>


    </RelativeLayout>


</ContentPage>

Here is what its looks like.

  

With further ivestigation it looks like Android can't work with transparent color For property BackgroundColor under

<calendar:SfCalendar
                BackgroundColor="Transparent"
                x:Name="calendar"/>

When I set BackgroundColor to any other color it looks like its working as it should. 

Best regards,

Jan Sochor

[SaiGanesh Sakthivel]

Hi Jan,

#Regarding issue in SfCalendar Transparent color in Android platform

Currently, we are validating the reported scenario from our end. we will update you on the further details on 8 April, 2022. We appreciate the patience until then.

Regards,
SaiGanesh Sakthivel

[SaiGanesh Sakthivel]

Hi Jan,

#Regarding issue in SfCalendar Transparent color in Android platform

We have found and fixed the reported scenario from our end. We will include the issue fix in our upcoming weekly nuget release which is expected out on 12 April, 2022. We appreciate the patience until then.

Regards,
SaiGanesh Sakthivel

[Ján Sochor]

Hi,

Good to know. I managed to workaround the transparent color with my defined color, but it's great to hear that you managed to fix it.

Thanks for your time.

Best regards,

Ján

[SaiGanesh Sakthivel]

Hi Jan,

We are glad to know that you have found the workaround for your requirement. We will let you know once the weekly NuGet release is rolled out. We appreciate your patience until then.

Regards,

SaiGanesh Sakthivel

[SaiGanesh Sakthivel]

Hi Jan,

#Regarding issue in SfCalendar Transparent color in Android platform

We have fixed the reported issue and included the issue fix in our latest Weekly NuGet release update version 20.1.0.48 onwards which is available for download (nuget.org).  

We thank you for your support and appreciate your patience in waiting for this update. Please get in touch with us if you would require any further assistance. 

Regards, 

SaiGanesh Sakthivel