如何將 gotoDate 與 vue.js 一起使用？

Question

https://fullcalendar.io/docs/v4/Calendar-gotoDate

我不知道如何在 vue.js 中使用 calendar.gotoDate( date )

例如https://fullcalendar.io/docs/v4/defaultDate訪問 defaultDate 我只是將它添加到並工作，gotoDate 在這里不起作用。

          <FullCalendar
                :key="calendarRender"
                ref="fullCalendar"
                defaultView="dayGridMonth"
                :header="{
                    left: 'prev,next today',
                    center: 'title',
                    right: ''
                  }"
                :plugins="calendarPlugins"
                :weekends="calendarWeekends"
                :events="calendarEvents"
                :selectable="true"
                :selectOverlap="false"
                @eventRender="eventRender"
                :dayRender="dayRender"
                :selectAllow="selectAllow"
                :allDayDefault="false"
                @select="select"
                :showNonCurrentDates="false"
                :fixedWeekCount="false"
                :goToDate="currentDate"
            />

嘗試使用，兩者都沒有工作。 在兩個不是 function 的情況下都給出了錯誤。

this.$refs.fullCalendar.gotoDate(new Date('2020-08-11'));
this.$refs.fullCalendar.calendar.gotoDate(new Date('2020-08-11')); 

目的是在我保存並強制它重新渲染以顯示新數據后，它會返回到 Jun 而不是我正在處理的當前月份。

Answer 1

根據https://fullcalendar.io/docs/v4/vue （在標題為“訪問 FullCalendar 的 API”的部分中），您必須先獲取日歷 API ZA8CFDE6331BD59EB2AC96F89111ZC4，然后才能調用它。 您必須調用一個特定的方法getApi()來執行此操作。

這是文檔中提到的示例：

要執行此類操作，您需要獲取組件的 ref（“reference”的縮寫）。 在模板中：

<FullCalendar ref="fullCalendar":plugins="calendarPlugins" />

獲得 ref 后，您可以通過 getApi 方法獲取底層日歷 object：

let calendarApi = this.$refs.fullCalendar.getApi()

calendarApi.next()

在你的情況下，而不是next()你會打電話

calendarApi.goToDate('2020-08-11');

（請注意，那里也不需要使用new Date - fullCalendar 將自動接受 ISO8601 日期字符串。）