使用按钮而不是滑动来导航 radcalender

Question

我正在尝试在 radcalendar 上添加用于浏览数月的按钮（老用户在手机上滑动的概念中苦苦挣扎）。应用仅用于手机，不能用于平板电脑。

到目前为止我所做的工作，但只有当用户手动选择一个与构建日历时以编程方式设置的日期不同的日期时。否则，什么都不会发生。

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

我尝试了一些方法，例如手动将焦点放在日历上，甚至以编程方式将日期设置为下一个日期并返回，但无济于事。

Answer 1

看起来问题是由 radcalendar 上的 dateSelected 事件以某种方式触发而不是初始加载时的导航引起的（不知道为什么会这样）。一旦我添加了加载的事件并以不同的方式将日历加载到本地对象中，这种情况就停止了：

<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(); 
  }

Answer 2

selectedDate 与日历中显示的当前日期/月份无关，请改用goToDate(date)。