Nuxt3中FullCalendar自定义头部标题不更新问题求助

直接绑定calendar.view.title无法实时更新是因为Vue无法监听FullCalendar内部的视图状态变化，必须通过FullCalendar提供的视图事件来同步标题到Vue的响应式变量中。

解决步骤 #

1. 定义响应式变量存储标题：用Vue的ref创建一个响应式变量来保存当前视图的标题，确保Vue能追踪其变化。
2. 监听FullCalendar的视图事件：利用viewDidMount（视图首次加载时触发）和viewDidChange（视图切换时触发）事件，将最新的视图标题同步到响应式变量中。
3. 绑定自定义头部的标题到响应式变量：在自定义头部中使用这个响应式变量，而不是直接访问calendar.view.title。

完整代码示例 #

<template>
  <div class="calendar-wrapper">
    <!-- 自定义头部区域 -->
    <div class="custom-calendar-header">
      <button @click="navigatePrev" class="nav-btn">上一页</button>
      <div class="current-title fw-bold">{{ currentViewTitle }}</div>
      <button @click="navigateNext" class="nav-btn">下一页</button>
    </div>

    <!-- FullCalendar组件 -->
    <FullCalendar 
      ref="calendarRef" 
      :options="calendarOptions"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'

// 绑定FullCalendar实例
const calendarRef = ref(null)
// 响应式变量存储当前视图标题
const currentViewTitle = ref('')

const calendarOptions = {
  plugins: [dayGridPlugin],
  initialView: 'dayGridMonth',
  // 视图首次加载时同步标题
  viewDidMount(info) {
    currentViewTitle.value = info.view.title
  },
  // 视图切换时同步标题
  viewDidChange(info) {
    currentViewTitle.value = info.view.title
  }
}

// 上一页导航逻辑
const navigatePrev = () => {
  calendarRef.value?.getApi().prev()
}

// 下一页导航逻辑
const navigateNext = () => {
  calendarRef.value?.getApi().next()
}
</script>

<style scoped>
.custom-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: #f8f9fa;
  margin-bottom: 1rem;
}
.nav-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  background: #007bff;
  color: white;
  cursor: pointer;
}
.current-title {
  font-size: 1.2rem;
}
</style>

关键说明 #

• viewDidMount和viewDidChange是FullCalendar官方提供的生命周期事件，能准确捕捉视图的初始化和切换动作。
• 通过ref获取FullCalendar实例后，调用getApi()可以访问日历的核心方法（比如prev()和next()），实现自定义导航按钮的功能。
• 使用响应式变量currentViewTitle绑定到模板，Vue会自动在变量更新时重新渲染标题，解决了切换视图后标题不更新的问题。

内容的提问来源于stack exchange，提问作者Mukesh Pensia