使用按钮而不是滑动来导航 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

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

Answer 2

看起来问题是由 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(); 
  }

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

Navigating radcalender with buttons instead of swipe

angular

typescript

nativescript

nativescript-angular