This is a migrated thread and some comments may be shown as answers.

Calendar in ScrollView

1 Answer 41 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Alien Interactive AB
Top achievements
Rank 1
Alien Interactive AB asked on 06 Sep 2017, 07:43 AM



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? 

1 Answer, 1 is accepted

Sort by
Nick Iliev
Telerik team
answered on 07 Sep 2017, 02:27 PM
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)
    <Button text="change Displayed Month To Octomber" tap="changeMOnthToOctomber" />
    <Button text="change Displayed Month To December" tap="changeMOnthToDecember" />
    <rc:RadCalendar id="calendar" viewMode="{{ ViewMode }}" />

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;
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

Nikolay Iliev
Progress Telerik
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Asked by
Alien Interactive AB
Top achievements
Rank 1
Answers by
Nick Iliev
Telerik team
Share this question