我正在使用 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 ,但不确定这是否可以满足我的上述要求。
提前致谢。
谢谢
最佳答案
我通过查找此处发出的事件来实现此目的: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 帮助我到达这里!
关于vue.js - Vue FullCalendar 中的下个月和上个月观察者,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56622852/