Navigating radcalender with buttons instead of swipe

Question

I am attempting to add buttons for navigating through months on a radcalendar (older users struggling with the concept of swiping on phones). App is only used on phones and not tablets.

What I have so far works but only once the user manually selects a date separate to the one that was programmatically set when constructing the calendar. Otherwise, nothing happens at all.

<DockLayout stretchLastChild="true">
    <GridLayout columns="auto,auto" rows="auto" dock="top" >
            <Button col="0" text="back" (tap)="back()"></Button>
            <Button col="1" text="forward" (tap)="forward()"></Button>
    </GridLayout>

    <StackLayout>
            <RadCalendar #calendar 
                eventsViewMode="Inline" 
                selectionMode="Single" 
                viewMode="Month" 
                transitionMode="Slide"
                locale="en-US" 
                [displayedDate]="selectedDate"
                [selectedDate]="selectedDate"
                (dateSelected)="onDateSelected($event)">
            </RadCalendar>
    </StackLayout>
</DockLayout>



import { Component, OnInit, ChangeDetectorRef, ViewChild } from "@angular/core";
import { RadCalendarComponent } from "nativescript-ui-calendar/angular";
import { ModalDialogParams } from "nativescript-angular/directives/dialogs";


@Component({
  selector: 'app-date-selector-modal-view',
  templateUrl: './date-selector-modal-view.component.html'
})
export class DateSelectorModalViewComponent implements OnInit {
  @ViewChild("calendar") calendarView: RadCalendarComponent;
  selectedDate: Date = new Date();
  hideFutureDates:boolean = false;

  public constructor(public params: ModalDialogParams, private cdRef:ChangeDetectorRef) { }

  ngOnInit() {
    let defaultDate = this.params.context.defaultDate;
    if(defaultDate){
      this.selectedDate = defaultDate;
      this.cdRef.detectChanges();
    }
  }

  forward() {  
    this.calendarView.calendar.navigateForward(); 
  }

  back() { 
    this.calendarView.calendar.navigateBack(); 
  }

  // On save button close
  save() {
    this.close(this.selectedDate);
  }

  // Update selected date on change
  onDateSelected(args) {
    this.selectedDate = args.date;
  }

  /* close modal and return date */
  public close(date: Date) {         
    this.params.closeCallback(date);
  }
}

I've tried a few things like manually giving focus to the calendar and even setting the date programmatically to the next date and back but to no avail.

Answer 1

Looks like the issue was caused by the dateSelected event on the radcalendar somehow triggering instead of the navigation on initial load (no idea why this is the case). This stopped occurring once I added the loaded event and loaded the calendar into a local object a different way:

<RadCalendar eventsViewMode="Inline" 
        selectionMode="Single" 
        viewMode="Month" 
        transitionMode="Slide"
        locale="en-US" 
        (dateSelected)="onDateSelected($event)"
        (loaded)="calendarLoaded($event)">
</RadCalendar>



  import { RadCalendar } from "nativescript-ui-calendar";

  mainCalendar: RadCalendar;

  calendarLoaded(args) {
    this.mainCalendar = <RadCalendar>args.object;
  }

  forward() {  
    this.mainCalendar.navigateForward(); 
  }

  back() { 
    this.mainCalendar.navigateBack(); 
  }