Weird appearance on IOS

I'm comparing Android and iOS(14.4.2 Iphone 8 plus) layout side by side, and here is how they look:

The funniest thing is that when I turn the phone to horizontal, it fix the problem, then when I turn back to vertical again, it keep the layout problem fixed! How can I solve this? I'm using the simplest code sample that I found on github docs:

<StackLayout>
        <xcViews:CalendarView
            x:Name="CalendarViewElement" 
         Days="{Binding Calendar.Days}"
        DaysOfWeek="{Binding Calendar.DayNamesOrder}"
        NavigatedDate="{Binding Calendar.NavigatedDate}"
         DayNameHorizontalSpacing="1"
        />
</StackLayout>

UPDATE

Simulating on iphone 13(ios 15)

At first moment:

After turn to horizontal:

Back again to vertical:

It looks like when the CollectionView containing the DaysOfWeek doesn't have enough space, it moves the items to the next row.

I think this is because the ItemsLayout in CalendarView line 73, is set to a GridItemsLayout with an Orientation of Vertical instead of Horizontal. The Span is equal to the amount of days in the week so it should never shrink to 3-day rows if there are 7 for example.

I'll look at this more closely in the next few days but if you are desperate, or want to try and fix the issue in the meantime, you can always set the DayNamesTemplate property of the CalendarView to a control template with your own view.

Do you know if this issue was present in earlier versions or was it introduced in 4.1.0?

   Can you try using a CollectionView instead of a CalendarView and see if the issue still occurs?

<CollectionView ItemsSource="{Binding Calendar.Days}"> 

    <CollectionView.Resources> 
        <System:Boolean x:Key="TrueValue">True</System:Boolean> 
        <xct:IsNotNullOrEmptyConverter x:Key="IsNotNullOrEmptyConverter"/> 
    </CollectionView.Resources> 

    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="{x:Type xcInterfaces:ICalendarDay}"> 
            <ContentView> 
                <Frame 
                    Margin="2.5" 
                    Padding="0" 
                    CornerRadius="100" 
                    HasShadow="False"> 
                    <xc:DayView 
                        DateTime="{Binding DateTime}" 
                        IsCurrentMonth="{Binding IsCurrentMonth}" 
                        IsInvalid="{Binding IsInvalid}" 
                        IsSelected="{Binding IsSelected}" 
                        IsToday="{Binding IsToday}"/> 
                </Frame> 
            </ContentView> 
        </DataTemplate> 
    </CollectionView.ItemTemplate> 
  
    <CollectionView.ItemsLayout> 
        <GridItemsLayout Orientation="Vertical" Span="{Binding Calendar.DayNamesOrder.Count}"/> 
    </CollectionView.ItemsLayout> 
  
</CollectionView>

I only get it when using a CarouselView for a swipable calendar. Regardless of using a CollectionView as suggested above, or the CalendarView, I observe the same behaviour. I'm also observing weird behaviour where the calendar keeps swiping across in UWP.

The SelectionPageExample works fine.

The code is cross-platform so if it works properly on Android or in a console app then it should work properly on IOS; if you were able to reproduce it with just a CollectionView then it seems the bug is caused by the CollectionView.

Last test would be to replace the DayView in the CollectionView's ItemTemplate with a Label to see if the issue is caused by the DayView.

<DataTemplate x:DataType="{x:Type xcInterfaces:ICalendarDay}"> 
    <ContentView> 
        <Frame 
            Margin="2.5" 
            Padding="0" 
            CornerRadius="100" 
            HasShadow="False"> 

            <Label Text="{Binding DateTime.Day}"/>

        </Frame> 
    </ContentView> 
</DataTemplate> 

May have been fixed by dotnet/maui#13137 if this is still an issue.