Vue FullCalendar如何动态设置选项？视图刷新问题求助

我懂你遇到的困扰啦——修改maxTime这类配置项后，日历视图完全没反应对吧？这是因为FullCalendar的Vue组件默认不会自动监听单个配置项的变化，得手动触发视图刷新才行。

下面是具体的解决步骤：

1. 给FullCalendar组件添加ref引用 #

首先在模板里给FullCalendar加上ref属性，这样我们才能拿到日历的实例对象：

<FullCalendar
  ref="fullCalendar"
  :options="calendarOptions"
  // 其他必要属性...
/>

2. 修改配置后调用API刷新视图 #

在你修改maxTime的方法里，更新配置后，调用FullCalendar的原生API强制重新渲染视图：

changeMaxTime() {
  // 更新maxTime配置
  this.calendarOptions.maxTime = '18:00';
  // 获取日历实例并调用render方法刷新视图
  this.$refs.fullCalendar.getApi().render();
}

原理说明 #

FullCalendar的Vue组件内部维护着独立的实例状态，当你只修改calendarOptions里的单个属性时，组件不会自动感知到变化并更新视图。通过getApi()获取到原生的FullCalendar实例后，调用render()方法可以让日历重新渲染，从而应用新的配置项。

如果修改配置后还需要重新加载事件数据，也可以搭配调用refetchEvents()方法，但针对maxTime这类视图显示配置，render()就足够生效啦。

内容的提问来源于stack exchange，提问作者Shure Alekseev