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.
#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.
<sfC:SfCalendar NumberOfWeeksInView="1" HeightRequest="200" ShowNavigationButtons="True"/>
<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.
<sfC:SfCalendar ShowNavigationButtons="True" NumberOfWeeksInView="1" ShowInlineEvents="True" InlineViewMode="Agenda" ToggleDaySelection="True" SelectionChanged="SfCalendar_SelectionChanged"/>
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);
(sender as SfCalendar).InlineViewMode = InlineViewMode.Agenda;
(sender as SfCalendar).ShowInlineEvents = true;
(sender as SfCalendar).NumberOfWeeksInView = 6;
(sender as SfCalendar).ShowInlineEvents = false;
Please let us know if you have any concerns.