We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Errors rendering SfCalendar inside of SfPopupLayout & SfCalendar Week View Support

I am building a cross platform iOS and Android application that uses Xamarin Forms Shell with the SfPopupLayout as a loading indicator for every page that will require loading content from the internet. I would like to use the SfCalendar in one of my pages and would like for it to support almost any size screen. 

Using the SfCalendar inside of a SfPopupLayout on a Xamarin Forms Shell Page with both Top and Bottom Tabs causes the Page Contents to render in outside of the Page bounds on Android. Additionally, the Month View with 1 week renders in horribly on both Android and iOS. Here is a link to download the project that I have used to recreate the issue: https://www.dropbox.com/s/uar3f6i69afmqll/FixSfCalendar.zip?dl=0

I am running the program on a 4.65 720p Galaxy Nexus API 32.

Also, using the agenda/inline event view is very impractical for some devices where the Month View requires a majority of the space on the device's display. In order to allow support for smaller devices, it would be awesome to have a Week View in the SfCalendar that will allow users to see one week at a time after selecting a date from the Month View. While in the Week View Mode, agenda/inline events (or a custom SfListView/Xamarin.Forms.ListView) will be displayed and swiping left/right or tapping the left/right arrow will select the date to the left/right of the currently selected date. Additionally, tapping on the Header will zoom out to the Month View where no agenda/inline events will be displayed. I have tried to recreate something like this on my own using some of the SfCalendar events but it turned out very buggy.


1 Reply

SS SaiGanesh Sakthivel Syncfusion Team December 5, 2022 09:41 AM UTC

Hi Bryson,

#Regarding calendar view height in the week view

Your requirement can be achieved by setting the value for heightRequest property to reduce the height of the calendar row in the view. Please refer to the following code snippet for your reference.

Code snippet



        <sfC:SfCalendar NumberOfWeeksInView="1"  HeightRequest="200"  ShowNavigationButtons="True"/>

        <StackLayout VerticalOptions="EndAndExpand">

            <Button Text="ADD BUTTON"/>




#Regarding changing the weekview into monthview when the selected date is in the view

Your requirement can b achieved with the help of SelectionChanged event in SfCalendar. Inside the event, you can change the view as week view and enable the agenda view to display in the view.

Code snippet

<sfC:SfCalendar ShowNavigationButtons="True" NumberOfWeeksInView="1" ShowInlineEvents="True" InlineViewMode="Agenda" ToggleDaySelection="True" SelectionChanged="SfCalendar_SelectionChanged"/>

SelectionChanged event

private void SfCalendar_SelectionChanged(object sender, Syncfusion.SfCalendar.XForms.SelectionChangedEventArgs e)


    if (e.DateAdded != null)


        (sender as SfCalendar).NumberOfWeeksInView = 1;

        (sender as SfCalendar).NavigateTo(e.DateAdded[0]);

        (sender as SfCalendar).InlineViewMode = InlineViewMode.Agenda;

        (sender as SfCalendar).ShowInlineEvents = true;




        (sender as SfCalendar).NumberOfWeeksInView = 6;

        (sender as SfCalendar).ShowInlineEvents = false;



Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/FixSfCalendar-1878875506

Please let us know if you have any concerns.

SaiGanesh Sakthivel

Live Chat Icon For mobile
Up arrow icon