Javascript Vue完整日历（下一个、上一个）按钮触发

我正在项目中使用。我遇到

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

我的后端api基于参数month returing events构建。我在Vuejs中有请求方法，它接受参数并返回事件。对于当前月份，我只使用created（）函数中的fetch方法，它返回事件，我只需使其等于日历事件，类似于：

get（/fetch/events？month=6）。然后（e=>this.events= this.responseToEvents（e.data））.catch（e=>…）

---

现在，我需要了解用户何时单击“下一步”或“上一步”按钮来触发带有属性月和重新蚀刻事件的请求。我没有找到方法，唯一的方法就是使用jQuery。

自己创建一个按钮，并给它一个@click=“next”事件

---

发出的事件：

changeMonth

e、 g

从“vue FullCalendar”导入FullCalendar
...
组成部分：{
日历
},
...
方法：{
变更月（开始、结束、当前月开始日期）{
console.log（currentMonthStartDate）；//通过单击“”（下一步）按钮更改月份后当前月份的开始日期
}
}

您可以覆盖默认按钮：

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

数据（）{
返回{
标题：{
左：“上一个，下一个今天”，
中心：“标题”，
右图：“dayGridMonth、timeGridWeek、timeGridDay、listWeek”
},
自定义按钮：{
prev:{//这将覆盖prev按钮
正文：“上一页”，
单击：（）=>{
console.log（“eventPrev”）；
设calendarApi=this.$refs.fullCalendar.getApi（）；
calendarApi.prev（）；
}
},
下一步：{//这将覆盖下一步按钮
正文：“上一页”，
点击：（）=>{
console.log（“eventNext”）；
设calendarApi=this.$refs.fullCalendar.getApi（）；
calendarApi.next（）；
}
}
}
}

你的插件只是FullCalendar的包装，FullCalendar是一个jQuery插件。每个jQuery事件都是通过插件发出的。你可以使用doku中描述的这些回调函数中的一个。我们应该如何在prev的click函数中获取月份？你可以获得基础日历对象

calendarApi

。这个对象我们将包含月份。请参考日历API部分，事实证明它非常有用，谢谢

<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>