解决 FullCalendar 在隐藏容器（如模态框）中渲染异常的问题

// 假设您已经初始化了 FullCalendar 并获取了其 API 实例
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
    // ... FullCalendar 配置选项 ...
});
calendar.render(); // 首次渲染，如果容器是隐藏的，这里会出问题

// 假设您的模态框有一个 ID 为 'myModal'
let myModal = document.getElementById('myModal');

// 监听模态框显示事件
// 这取决于您使用的模态框库。以下是几种常见的监听方式：

// 方式一：如果模态框通过 CSS `display` 属性控制
// 您可能需要监听一个自定义事件，或者在控制模态框显示的函数中调用
function showModal() {
    myModal.style.display = 'block'; // 显示模态框
    // 等待 DOM 更新完成，然后重新渲染日历
    setTimeout(() => {
        calendar.render();
    }, 0); // 使用 setTimeout(..., 0) 可以将渲染操作推迟到当前事件循环的末尾
}

function hideModal() {
    myModal.style.display = 'none'; // 隐藏模态框
}

// 方式二：如果使用 Bootstrap 等前端框架的模态框
// Bootstrap 模态框提供了 'shown.bs.modal' 事件
// $('#myModal').on('shown.bs.modal', function () {
//     calendar.render();
// });

// 方式三：在 Vue/React 等框架中
// 假设您在 Vue 组件中控制模态框的显示，并在 FullCalendar 组件上设置了 ref
// 在 Vue 的 `mounted` 或 `updated` 生命周期钩子中，或者在控制 `v-if` 的方法中
// 当 `showModal` 变为 true 后，使用 `this.$nextTick` 确保 DOM 更新完毕
/*
<template>
    <vue-final-modal v-model="showModal">
        <div ref="calendarContainer">
            <FullCalendar :options="calendarOptions" @eventDidMount="handleCalendarInit" />
        </div>
    </vue-final-modal>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'; // 或者其他 FullCalendar 封装
import dayGridPlugin from '@fullcalendar/daygrid';

export default {
    components: {
        FullCalendar
    },
    data() {
        return {
            showModal: false,
            calendarApi: null, // 用于存储 FullCalendar 实例
            calendarOptions: {
                plugins: [dayGridPlugin],
                initialView: 'dayGridMonth',
                // ... 其他配置
            }
        };
    },
    methods: {
        modalControl() {
            this.showModal = !this.showModal;
            if (this.showModal) {
                // 当模态框显示后，等待 Vue 完成 DOM 更新
                this.$nextTick(() => {
                    if (this.calendarApi) {
                        this.calendarApi.render();
                    }
                });
            }
        },
        handleCalendarInit(payload) {
            // 在 FullCalendar 组件初始化后获取其 API 实例
            // 具体的获取方式取决于您使用的 FullCalendar Vue 封装
            // 常见的有通过 ref 或 event
            this.calendarApi = payload.view.calendar; // 示例：从 event payload 获取
            // 或者通过 ref: this.calendarApi = this.$refs.fullCalendarRef.getApi();
        }
    }
};
</script>
*/