Vue FullCalendar 中的下个月和上个月观察者

Question

我正在将 FullCalendar 库与 Vue.js 一起使用

是否可以使用默认的上一个、下一个和今天按钮来触发我自己的操作。

我已经创建了自定义按钮来执行我想要的操作，但更喜欢使用默认按钮。

当前我有一个链接到方法的按钮：

<button @click="handleMonthIncrement">Next Month</button>

这调用了这个方法：

 handleMonthIncrement: function(arg) {
  // update month and year
  this.incrementMonth();

  // update calendar
  let calendarApi = this.$refs.fullCalendar.getApi();
  calendarApi.next();

  // updateCurrentSummary (mapped to store)
  this.updateCurrentSummary();
}

我正在使用 ref=fullCalendar ，它与日历的 jQuery 引用相关联来更改视图。

如果我可以收听下一个、上一个按钮，那么我可以删除该代码，因为这些按钮已经更改了日历视图。

这可能吗？我知道 viewRender （https://fullcalendar.io/docs/v1/viewRender）可用于记录日历何时更改视图，但不确定这是否可以满足我的上述要求。

提前致谢。

谢谢

Answer 1

我通过查找此处发出的事件来实现这一点： https: //github.com/fullcalendar/fullcalendar-vue/blob/master/src/fullcalendar-options.js

我发现了datesRender - 可以将其添加到以@开头的FullCalendar元素中，以在日期重新渲染时触发。因为我只有月份视图，所以我可以触发一个称为handleMonthChange 的方法。

看这里：

<FullCalendar
  defaultView="dayGridMonth"
  @datesRender="handleMonthChange"
/>

然后在handleMonthChange 中我有以下内容：

handleMonthChange: function(arg) {
  var currentStart = arg.view.currentStart;
  var check = moment(currentStart, "YYYY/MM/DD");
  var currentMonth = check.format("M");

  // load action
  this.updateCurrentMonth(currentMonth);
  // refresh summaries
  this.updateSummary();
}

我使用 moment 来确定日期中的月份（从视图对象。

在此处查看有关传递回的内容的更多信息https://fullcalendar.io/docs/datesRender

然后，我使用它通过调用 Vuex 操作来更改 Vuex 状态中的月份，然后根据需要更新了我的摘要部分。

希望对其他人也有帮助。非常感谢@ADyson 帮助我到达这里！