javascript - Vue Full Calendar (next, prev) 按钮触发

Question

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

problem when I need to get callback or trigger of next and prev buttons of 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>