Vue 完整日历(下一个，上一个)按钮触发

Question

我在项目中使用 https://www.npmjs.com/package/vue-full-calendar。我遇到了

当我需要获取下一个和上一个的回调或触发器时出现问题 日历按钮。

我的后端 api 建立在参数月份重新事件上。我在 Vuejs 中有请求方法，它接受参数并返回事件。对于本月，我只在 created(( 函数中使用 fetch 方法，它返回事件，我只是等于日历事件，如下所示：

axios.get(/fetch/events？month=6(.then(e => this.events = this.responseToEvents(e.data((.catch( e => ...(.

现在我需要了解用户何时单击下一个或上一个按钮以触发带有属性月份和重新获取事件的此请求。我没有找到一种方法来做到这一点，唯一的方法是使用jQuery。

Answer 1

您可以覆盖默认按钮：

<full-calendar ref="fullCalendar" :custom-buttons="customButtons" :header="header" />

<script>   
data() {
return {
header: {
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
},
customButtons: { 
prev: { // this overrides the prev button
text: "PREV", 
click: () => {           
console.log("eventPrev");
let calendarApi = this.$refs.fullCalendar.getApi();
calendarApi.prev();
}
},
next: { // this overrides the next button
text: "PREV",
click: () => {
console.log("eventNext");
let calendarApi = this.$refs.fullCalendar.getApi();
calendarApi.next();
}
}
}
}
</script>

Answer 2

自己创建一个按钮并给它一个 @click="next" 事件 https://github.com/CroudTech/vue-fullcalendar#methods

Answer 3

发出的事件：例如changeMonth

<template>
<full-calendar
@changeMonth="changeMonth"
></full-calendar>
</template>
import FullCalendar from 'vue-fullcalendar'
...
components: {
FullCalendar
},
...
methods: {
changeMonth(start, end, currentMonthStartDate) {
console.log(currentMonthStartDate); // the start date of the current month after changing month by clicking the '<'(previous) or '>'(next) button
}
}