How do I work scrolling an entire page with Telerik's RadCalendar?

[Deepika]

When I place the RadCalendar within a scrollview like so:

<ScrollView>
<StackLayout>
<telerikInput:RadCalendar x:Name="calendar" ViewMode="Month" SelectionMode="Single" GridLinesDisplayMode="Hide"/>
<ListView/>
</StackLayout>
</ScrollView>

I can no longer scroll up to previous months using the Calendar itself. I do require both the calendar and the listview to be scrollable. Is it possible to change the way the month changes? Is it possible to use swiping left/right to move to the previous/next month?

If not, how can I work with this requirement?

[Didi]

Hi Deepika,

Thank you for the provided code.

A scenario where the RadCalendar is used within a ScrollView is not that common and such gesture conflicts might be observed as we have different native implementations of the RadCalendar for the different platforms. We have an issue logged in our feedback portal regarding this. You can follow the item on the link below:

https://feedback.telerik.com/xamarin/1416300-calendar-android-when-hosted-inside-scrollview-swipe-gestures-does-not-work

Solution:

Actually, the calendar in Android supports horizontal scrolling. You can achieve this through a custom renderer. Mainly you need to apply the following changes to the native element used for the RadCalendar in Android:

[assembly: ExportRenderer(typeof(RadCalendar), typeof(CustomCalendarRenderer))]

namespace AccColorConverter.Droid
{
    public class CustomCalendarRenderer : CalendarRenderer
    {
        public CustomCalendarRenderer(Context context) : base(context)
        {

        }
        protected override void OnElementChanged(ElementChangedEventArgs<RadCalendar> e)
        {
            base.OnElementChanged(e);
            this.Control.HorizontalScroll = true;
        }
    }
}

I have attached my test project for reference. Please review the CustomCalendarRenderer.cs file inside the Android project.

I hope the information provided will be useful. If you have any additional questions, do not hesitate to contact us.

Regards,
Didi
Progress Telerik

[Deepika]

Hi Didi,

Thank you for your response. Since I'm building a cross platform app, I can't do anything for Android that I can't do for iOS. Is there a renderer that I can write for iOS too?

Instead, will I be able to move to another month using buttons? As in, by changing the selected date perhaps?

[Deepika]

Sorry, I wanted to add: Can I disable the scroll altogether for the calendar? It does sometimes try to scroll and get stuck. If I can disable the scroll and navigate the months using buttons, that would work too

[Didi]

Hi Deepika,

Let me get straight to your questiuons:

1) RadCalendar swipe left/right in order to navigate previous/next month:

By default the iOS calendar navigates to next/previous month while swiping right/left. On Android you should swipe up/down to navigate previous/next month. 
In order to achieve same behavior as on iOS, a custom render for Android should be implemented - as in the attached sample from my previous reply.

2) Avoid calendar stuck inside a ScrollView:

The swipe gesture could be disabled on iOS and Android through a custom renderer. For more details how to achieve this on iOS check the Calendar View Transitions help article from the native documentation, for Android refer to the Gestures and Transitions article. 

I have modified the previous attached project with section 2) implemented. Please note that you do not need a buttons for previous/next month navigation. For more details review the TouchListener class inside the CustomCalendarRenderer.cs file (Android project).

How to stop the transitions on iOS - review CustomCalendarRenderer.cs file inside the iOS project.

3) Further native calendar customization using a custom renderer:

Different solutions with the native Android and iOS calendar controls could be found in our Native Developer Focused Examples.They can be found in the /[installation-path]/Telerik UI for Xamarin [version]/Examples/ . Respectively, they are separated in different folders - iOS and Android.

I hope this will help.

Regards,
Didi
Progress Telerik