Calendar in ScrollView

Thread is closed for posting
2 posts, 0 answers
  1. Alien Interactive AB
    Alien Interactive AB avatar
    21 posts
    Member since:
    Jul 2004

    Posted 06 Sep 2017 Link to this post



    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? 

  2. Nikolay Iliev
    Nikolay Iliev avatar
    351 posts

    Posted 07 Sep 2017 Link to this post

    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.
Back to Top