gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 19:57:48 25 4
gpt4 key购买 nike

我正在使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com