Question

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

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

我的后端api建立在参数月回溯事件的基础上。我在Vuejs中有请求方法，它接受参数和返回事件。对于当前月份，我只使用created（）函数中的fetch方法，它返回事件，我只是等于日历事件，类似：

axios.get（/ fetch / events？month = 6）.then（e =＆gt; this.events = this.responseToEvents（e.data））。catch（e =＆gt; ...）。

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

Answer 1

自己创建一个按钮，并为其提供一个@ click =“ next”事件 https://github.com/CroudTech/vue-fullcalendar#methods

Answer 2

发出的事件：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
  }
}

Answer 3

您可以覆盖默认按钮：

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

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

3 个答案: