Vue 完整日历（下一个，上一个）按钮触发答案

【问题标题】：Vue Full Calendar (next, prev) buttons triggerVue 完整日历（下一个，上一个）按钮触发
【发布时间】：2018-11-25 23:50:16
【问题描述】：

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

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

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

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

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

【问题讨论】：

您的插件只是fullcalender 的一个包装器，它是一个jQuery 插件。每个 jQuery 事件都是通过插件发出的。您可以只使用 doku fullcalendar.io/docs/event-display 中描述的这些回调中的一个

标签： javascript vue.js vuejs2 fullcalendar

【解决方案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>

【讨论】：

prev的click函数中如何获取月份？
你可以得到底层的日历对象calendarApi。此对象应包含月份。请参考fullcalendar.io/docs/vue中的日历API部分

【解决方案2】：

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

【讨论】：

【解决方案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
  }
}

【讨论】：