GoToDate problems when used during viewMode change(RadCalendar).

[igotyou]

Did you verify this is a real problem by searching Stack Overflow?

Yes

Tell us about the problem

GoToDate problems when used during viewMode change.

If you use goToDate on a date in another month than the one currently selected, and then change the viewMode to day, scrolling left or right will send you back to the previously selected date. Additionally events won't be displayed correctly(if you for example initially select 9. feb, then goToDate(7 jan)+viewmode=day, any events on 7. jan won't show up).

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI version: 4.6.1
• CLI: 3.3.1
• Cross-platform modules: 4.6.1
• Runtime(s): Could not find this

Please tell us how to recreate the issue in as much detail as possible.

1. Start the application ..
2. Click on a date in the current month.
3. Click back button(on android, or add a button to do similiar function)
4. Scroll to another month.
5. Click on a date in the other month.
6. The selected date and displayed date will tell you that the goToDate worked, and the new date is selected. However this is not the case. Events won't show up in the day view, and step 7 will give a incorrect result.
7. Scroll the day view left or right(going to the previous day/next day)
8. This is the bug:The calendar will jump back to the date selected in step 2(+/- 1 day depending on which way you swipped)

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

main.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { Page, isAndroid } from "ui/page";

import { CalendarEvent, CalendarSelectionEventData, CalendarViewMode, CalendarEventsViewMode, CalendarDayViewEventSelectedData, RadCalendar, CalendarViewModeChangedEventData } from 'nativescript-pro-ui/calendar';
import { RadCalendarComponent } from 'nativescript-pro-ui/calendar/angular';

import { AndroidApplication, android, AndroidActivityBackPressedEventData } from 'tns-core-modules/application/application';

@Component({
  moduleId: module.id,
  selector: 'main',
  templateUrl: 'main.component.html',
})
export class MainComponent implements OnInit {
  private _viewMode;
  private calendar: RadCalendar;

  @ViewChild("mainCalendar") calendarElement: RadCalendarComponent;

  constructor(private page: Page) { 
  }

  ngOnInit() {
    this.page.actionBarHidden = true;
    this.calendar = this.calendarElement.calendar;
    if(isAndroid) {
      android.on(AndroidApplication.activityBackPressedEvent, (data: AndroidActivityBackPressedEventData) => {
          this.calendar.viewMode = CalendarViewMode.Month;
          data.cancel = true;
      });
    }
  }

  onDateSelected(args: CalendarSelectionEventData){
    this.calendar.goToDate(args.date);
    console.log("args date" + args.date);
    console.log("displayed:" + this.calendar.displayedDate);
    console.log("selected:" + this.calendar.selectedDate);
    this.calendar.viewMode = CalendarViewMode.Day;
  }
}

main.component.html

<StackLayout>
    <RadCalendar #mainCalendar  (dateSelected)="onDateSelected($event)" ></RadCalendar>
</StackLayout>

[tsonevn]

Hi @igotyou, Thank you for reporting this issue. I tested this case on my side and have to confirm that this is a real issue. I am attaching sample project, which could be used for debugging.

For further info, please keep track on the issue.

Archive.zip