Question

我正在Angular 7应用程序中实现fullCalendar，日历正在运行，并且正在向其中导入一些事件，但是我试图使其更加高效，我尝试仅带来日历所需的事件。

所以..我有一些问题。

如何在“上一个”或“下一个”或“今天”按钮中获取点击事件？

如何获取当前日期？

我一直在检查文档...但是只有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>

还有我的电话

  @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

根据插件的docs，您可以访问基础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);
  }

}

我没有找到上一个和下一个按钮发出的任何事件，但是您可以使用calendar.prev()和calendar.next()方法来构建自己的按钮。

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

Answer 2

我现在迟到了，但我想与您分享我的解决方案，所以：在您的日历选项中，您可以添加 customButtons 属性，然后将您的 newNextFunct 添加到 fullCalendar 函数中，如下所示：

customButtons: {
    next: {
        click: this.nextMonth.bind(this),
    },
    prev: {
        click: this.prevMonth.bind(this),
    },
    today: {
        text: "Aujourd'hui",
        click: this.currentMonth.bind(this),
    },
},

名为 nextMonth 的 newNextFunction 必须是这样的：

nextMonth(): void {
    console.warn('nextMonth');
    this.calendarApi = this.calendarComponent.getApi();
    this.calendarApi.next();
}

如何利用Angular 7 CLI全日历来捕捉下一个上一个今天的事件

2 个答案: