FullCalendar在模态框等隐藏容器中渲染异常的解决方案

// 假设你已经获取了FullCalendar的API实例
let calendarApi = calendarRef.getApi();
calendarApi.render();

<template>
  <div>
    <button @click="showModal = true">打开日历模态框</button>

    <!-- vue-final-modal 组件 -->
    <vue-final-modal v-model="showModal" :drag="true" :esc-to-close="true" @opened="handleModalOpened">
      <div class="flex items-center justify-center h-screen">
        <div class="bg-backgroundWhite p-12">
          <div class="flex justify-between">
            <div>预约课程</div>
            <button @click="showModal = false">X</button>
          </div>
          <div class="flex-row w-full h-full p-3 shadow-xl rounded-xl m-3">
            <!-- FullCalendar 组件，通过 ref 获取实例 -->
            <FullCalendar ref="fullCalendarRef" :options="calendarOptions"/>
          </div>
        </div>
      </div>
    </vue-final-modal>
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue3'; // 假设使用 Vue 3
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';
// 假设 vue-final-modal 已全局注册或按需导入
// import { VueFinalModal } from 'vue-final-modal';

export default {
  components: {
    FullCalendar,
    // VueFinalModal, // 如果是局部导入
  },
  data() {
    return {
      showModal: false,
      calendarOptions: {
        timeZone: 'UTC',
        plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        contentHeight: 'auto', // 自动高度
        aspectRatio: 1.5, // 宽高比
        buttonText: {
          today: '今天',
          month: '月',
          week: '周',
          list: '列表'
        },
        headerToolbar: {
          left: 'prev next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,listWeek' // 示例中只用了dayGridMonth，这里扩展一下
        },
        selectable: true,
        weekends: true,
        dateClick: this.handleDateClick // 假设有这个方法
      }
    };
  },
  methods: {
    // 模态框打开后的回调函数
    handleModalOpened() {
      // 使用 nextTick 确保 DOM 已经更新，FullCalendar的容器已完全可见
      this.$nextTick(() => {
        if (this.$refs.fullCalendarRef) {
          // 获取 FullCalendar 的 API 实例
          const calendarApi = this.$refs.fullCalendarRef.getApi();
          if (calendarApi) {
            calendarApi.render(); // 强制 FullCalendar 重新渲染
            console.log('FullCalendar 已在模态框打开后重新渲染。');
          }
        }
      });
    },
    handleDateClick(arg) {
      console.log('日期点击:', arg.dateStr);
      // 处理日期点击事件
    },
    // modalControl 方法可以简化为直接修改 showModal
    // modalControl() {
    //     this.showModal = !this.showModal;
    // }
  }
};
</script>

<style scoped>
/* 样式根据实际项目调整 */
.bg-backgroundWhite {
  background-color: white; /* 示例背景色 */
}
.h-screen {
  height: 100vh;
}
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.p-12 {
  padding: 3rem; /* 示例内边距 */
}
.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.m-3 {
  margin: 0.75rem;
}
</style>