Calendar in ScrollView

[Alien Interactive AB]

Hello,

 

I am using the calendar in a scroll view this interfears with the month selection (scroll horizontally). Is there a way of adding buttons for changing month? Or stop the vertical scrolling when horizontal scrolling is ongoing? 

[Nick Iliev]

Hi Martin,

Based on the provided information I have wrapped the Calendar control in ScrollView and it works as expected. I have used this specific example and modified the code base so it contains ScrollView in which there are several buttons (for changing the view modes) and a calendar which can be scrolled horizontally while the ScrollView scrolls vertically with no side effects on Android. However, on iOS, the event propagation by default will consume the nested gestures meaning that when you have multiple swipe gestures (like ScrollView and RadCalendar) only the control that is focused will fire the event. That said on iOS when you have RadCalendar nested inside ScrollView the scrolling will be fired for ScrollView only when swiping outside the RadCalendar, and when the user interacts with the RadCalendar the scrolling will work for the calendar view but not for the ScrollView.

As you already suggested with your question about manually chaning the months - this is an applicable workaround to avoid having multiple scroll actions in iOS. So you can create a method taht can be triggered via Button (or other technique) which will simply change the displayedDate property of your calendar. This way the calendar will dynamically change the active month.

For example (based on the source code from this demo sample)

<StackLayout>
    <Button text="change Displayed Month To Octomber" tap="changeMOnthToOctomber" />
    <Button text="change Displayed Month To December" tap="changeMOnthToDecember" />
    <rc:RadCalendar id="calendar" viewMode="{{ ViewMode }}" />
</StackLayout>

And then using the unique ID, I am getting a reference to our RadCalendar and chaing the displayed and the selected date as follows:

var calendar: calendarModule.RadCalendar;

export function onPageLoaded(args){
    var page = args.object;

    calendar = <calendarModule.RadCalendar>page.getViewById("calendar");

    page.bindingContext = viewModelContext;
    viewModelContext.updateViewMode();
}

export function changeMOnthToOctomber() {
    calendar.displayedDate = new Date("October 1, 2017");
    calendar.selectedDate = new Date("October 1, 2017"); // for demonstrations - only change the selected date if the business logic requires it
}
export function changeMOnthToDecember() {
    calendar.displayedDate = new Date("December 1, 2017");
    calendar.selectedDate = new Date("December 1, 2017");
}

With the above code, when the RadCalendar is in Month view mdoe, tappng on the button that triggers changeMonthToOctomber will refresh the calendar view so it will show Octomber as active month. This way you can create interface for manual changing of the months without having to worry about the mutiple scrolling issue in iOS.

I hope the solution will be applicable for your project but please do let me know if oyu need further assistance

Regards,
Nikolay Iliev
Progress Telerik