如何在FullCalendar的Vue实例上运行.getDate()？

Question

我用的是 VUE的实施 的组件, 我想从日历实例中获取当前显示的月份和年份. 这是一个Laravel应用, 所以我在 然后在相关的Vue组件中调用它：app.js 然后在相关的Vue组件中调用它。

app.js

---

import FullCalendar from '@fullcalendar/vue';
...
...
Vue.component('full-calendar', FullCalendar);
...
...
const app = new Vue({
    el: '#app',

    router: new VueRouter(routes),
});

然后

MyComponent.vue

---

<template>
    <div>
        <full-calendar class="mt-2"
            ref="cc"
            @eventClick="eventClicked"
            @eventRender="eventRender"
            :selectable="true"
            default-view="dayGridMonth" 
            :events="change_events" 
            :plugins="calendar_plugins"></full-calendar>
        </div>
</template>

<script>
   ...
</script>

现在，我想打电话给... getDate() 方法，所以我在Vue方法中尝试了以下方法。

 methods: {

    getSelectedMonth() {
      console.log(this.$refs.cc.getDate());
    },
}

我还尝试了 this.$refs.cc.fullCalendar.getDate()但很明显我引用错了。我如何引用日历实例，使我仍然可以调用FullCalendar方法？或者有其他方法可以通过Vue绑定来实现吗？

我一直得到的错误是

app.js:82407 [Vue warn]: Error in v-on handler: "TypeError: this.$refs.cc.getDate is not a function"

Answer 1

找到了,你只需要调用getApi()方法来访问完整的Api.

methods: {

    getSelectedMonth() {
      let calendarApi = this.$refs.cc.getApi();
      console.log(calendarApi.getDate());
    },
}