解决 FullCalendar 在模态框中渲染异常的问题

<FullCalendar ref="fullCalendar" :options="calendarOptions"/>

<template>
  <div>
    <button @click="openModal" class="open-modal-button">打开日历模态框</button>

    <vue-final-modal
      v-model="showModal"
      :drag="true"
      :esc-to-close="true"
      @opened="handleModalOpened" <!-- 监听模态框打开事件 -->
    >
      <div class="modal-container">
        <div class="modal-content">
          <div class="modal-header">
            <span>预订课程</span>
            <button @click="closeModal" class="close-button">X</button>
          </div>
          <div class="calendar-wrapper">
            <!-- FullCalendar 组件，添加 ref 属性 -->
            <FullCalendar
              ref="fullCalendar"
              :options="calendarOptions"
            />
          </div>
        </div>
      </div>
    </vue-final-modal>
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
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, // 宽高比，如果 contentHeight 设置为 auto，此属性可能不起作用
        buttonText: {
          today: '今天',
          month: '月',
          week: '周',
          list: '列表'
        },
        headerToolbar: {
          left: 'prev next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,listWeek' // 示例中只显示月视图，这里可以根据需要添加
        },
        selectable: true,
        weekends: true,
        dateClick: this.handleDateClick,
        events: [] // 可以在这里加载事件数据
      }
    }
  },
  methods: {
    openModal() {
      this.showModal = true
    },
    closeModal() {
      this.showModal = false
    },
    // 模态框完全打开后触发的事件
    handleModalOpened() {
      // 使用 $nextTick 确保 DOM 已经完全更新并可见
      this.$nextTick(() => {
        const calendarApi = this.$refs.fullCalendar.getApi()
        if (calendarApi) {
          calendarApi.render() // 强制 FullCalendar 重新渲染
          console.log('FullCalendar has been re-rendered.')
        } else {
          console.warn('FullCalendar API not found.')
        }
      })
    },
    handleDateClick(arg) {
      console.log('日期被点击:', arg.dateStr)
      // 处理日期点击事件，例如打开另一个表单来添加事件
    }
  }
}
</script>

<style scoped>
/* 模态框和日历的样式，根据实际项目调整 */
.open-modal-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
}

.modal-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 确保模态框容器占满视口 */
}

.modal-content {
  background-color: #ffffff;
  padding: 3rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  width: 90%; /* 模态框内容宽度 */
  max-width: 900px; /* 最大宽度 */
  box-sizing: border-box; /* 确保 padding 不会超出宽度 */
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
}

.close-button {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
}
.close-button:hover {
  color: #333;
}

.calendar-wrapper {
  width: 100%;
  /* FullCalendar 会根据其 options 内部调整高度 */
  /* 如果设置了 contentHeight: 'auto'，则不需要在此处设置固定高度 */
}
</style>