如何使用 Angular 7 cli 的全日历捕捉下一个、上一个、今天的事件

Question

我正在我的 Angular 7 应用程序中实现 fullCalendar，日历正在工作，我正在向它导入一些事件，但我试图让它更有效，我试图只带来日历需要的事件。

所以..我有一些问题。

如何在 Prev 或 Next 或 Today 按钮中获得点击事件？

如何获取当前日期？

我一直在检查文档......但只有jquery的例子......

我在这里复制我的 HTML

  <full-calendar id="calendar" *ngIf="options" #fullcalendar [editable]="true" [events]="citas"
    [header]="options.header" [locale]="options.locale" [customButtons]="options.customButtons"
    (dateClick)="dateClick($event)" [plugins]="options.plugins" (eventClick)="eventClick($event)" [eventLimit]="4">
  </full-calendar>

还有我的 Ts

  @ViewChild('fullcalendar') fullcalendar: FullCalendarComponent;

  constructor() {
    this.options = {

      editable: true,
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth, listDay'
      },
      plugins: [dayGridPlugin, listPlugin, timeGridPlugin],
      locale: esLocale,
    };

  }

Answer 1

根据插件的文档，您可以访问Calendar原始数据和方法的底层对象：

const calendarApi = this.calendarComponent.getApi();

可以在此处找到日期导航方法的完整列表：https : //fullcalendar.io/docs/date-navigation。

因此，要获得我们可以使用当前日期：calendarApi.getDate();。

以下代码应该可以工作：

export class AppComponent {

  // references the #calendar in the template
  @ViewChild('calendar') calendarComponent: FullCalendarComponent;


  someMethod() {
    const calendarApi = this.calendarComponent.getApi();
    const currentDate = calendarApi.getDate();
    console.log("The current date of the calendar is " + currentDate);
  }
  
}

我还没有发现为 prev 和 next 按钮发出任何事件，但您可以使用calendar.prev()和calendar.next()方法构建自己的按钮。

  goPrev() {
    const calendarApi = this.calendarComponent.getApi();
    calendarApi.next(); // call a method on the Calendar object
  }