时间戳

首页 > 解决方案 > Vue FullCalendar 中的下个月和上个月观察者

vue.js - Vue FullCalendar 中的下个月和上个月观察者

问题描述

我正在使用带有 Vue.js 的 FullCalendar 库

是否可以使用默认的 prev、next 和 today 按钮来触发我自己的操作。

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

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

<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 ) 可用于记录日历何时更改视图，但不确定这是否可用于我的上述要求。

提前致谢。

谢谢

标签： vue.jsfullcalendarvuex

解决方案

我通过查看此处发出的事件来实现这一点：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();
}

我用时刻来确定日期的月份（从视图对象。

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

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

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

推荐阅读