vue.js - 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 引用相关联来更改 View 。

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

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

提前致谢。

谢谢

Answer 1

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

我发现了datesRender - 可以将其添加到以@开头的FullCalendar元素中，以在日期重新渲染时触发。因为我只有月份 View ，所以我可以触发一个称为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 来确定日期中的月份(从 View 对象中)。

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

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

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