如何将 gotoDate 与 vue.js 一起使用？

Question

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

我不知道如何在 vue.js

中使用 calendar.gotoDate( 日期 )

例如 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"
            />

尝试使用，但均无效。在不是函数的两个 cassed 中都给出了错误。

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 object，然后才能调用方法它。有一个特定的方法 getApi()，您必须调用它来执行此操作。

这里是文档中提到的例子：

To do something like this, you’ll need to get hold of the component’s ref (short for “reference”). In the template:

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

Once you have the ref, you can get the underlying Calendar object via the getApi method:

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

calendarApi.next()

在你的情况下，你会打电话给

而不是 next()

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

（请注意，这里也不需要使用 new Date - fullCalendar 会自动 accept an ISO8601 date string。）

如何将 gotoDate 与 vue.js 一起使用？

How to Use gotoDate with vue.js?

javascript

fullcalendar

vue.js

fullcalendar-4