0

我正在为这个项目使用 vuejs。在 FullCalendar(v5.3.0) 中，我一直在尝试在月视图（默认视图）中单击特定日期时获取 timeGridDay，所选日期是要显示的日期。

我使用 ref 来引用 FullCalendar 组件。（此处仅显示相关部分）

<template>
  <div class="main">
    <div class="calendar-holder col-10 section">
      <FullCalendar ref="fullcalendar" :options="options" />
    </div>
  </div>
</template>

然后我尝试使用 dateClick 方法在单击日期时进入 timeGridDay 视图。

data(){
  return {
    calendarApi: null,
    options: {
      plugins: [ 
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin,
        listPlugin 
      ],
      initialView: 'dayGridMonth',
      dateClick: function(info) {
        if(confirm('View Schedule?')){
          let calendarApi = this.$ref.fullcalendar.getApi();
          calendarApi.fullCalendar('changeView', 'timeGridDay', info.date);
        }
      }
    }
  }
}

这没有用。当我检查控制台时它说

类型错误：this.$ref 未定义

但是当我在挂载的钩子中尝试相同的代码时它并没有未定义（在数据中初始化 calendarApi）

mounted(){
  this.calendarApi = this.$refs.fullcalendar.getApi();
  console.log(this.calendarApi)
}

它返回了一个对象。但我无法在 dateClick 方法中获取该 calendarApi 对象。我试过了：

dateClick: function(info) {
  if(confirm('View Schedule?')){
    this.calendarApi.fullCalendar('changeView', 'timeGridDay', info.date);
  }
}

没用。控制台给出了这个错误：

类型错误：this.calendarApi 未定义

有什么办法可以解决这个问题吗？我也尝试从另一个方法获取 calendarApi 对象，但控制台说该方法未定义。提前致谢。

4

1 回答 1

0

我通过将 dateClick 函数更改为：

          dateClick: (info) => {
            if(confirm('View Schedule?')){
              let calendarApi = this.$refs.fullcalendar.getApi();
              calendarApi.changeView('timeGridDay', info.date);
            }
          }

您可以在此链接上找到更多信息：https ://fullcalendar.io/docs/Calendar-changeView

于 2020-09-04T02:55:56.480 回答