如何在模态对话框（Modal Dialog）中显示FullCalendar组件

以下是适配需求的完整代码（以Bootstrap模态框为例，其他模态组件逻辑通用）：

<!-- 触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#calendarModal">Depot Calendar</button>

<!-- 日历模态框 -->
<div class="modal fade" id="calendarModal" tabindex="-1" aria-labelledby="calendarModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg"> <!-- 大尺寸模态框给日历预留足够空间 -->
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="calendarModalLabel">Depot Calendar</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 日历容器移至模态框内部 -->
        <div class="att-area" id="empcalendar"></div>
      </div>
    </div>
  </div>
</div>

<script>
// 事件数据示例（建议用字符串日期格式，兼容性更好）
var empevents = [
  {empid: 159, title: 'XXXXX - UnPaid', start: '2024-01-02', end: '2024-01-02', allDay: true},
  {empid: 9, title: 'YYY - UnPaid', start: '2024-01-02', end: '2024-01-02', allDay: true}
];

// 模态框完全显示后初始化日历（容器可见时渲染才正常）
document.getElementById('calendarModal').addEventListener('shown.bs.modal', function () {
  // 先销毁旧实例，避免重复渲染
  $('#empcalendar').fullCalendar('destroy');
  $('#empcalendar').fullCalendar({
    defaultView: 'month',  
    handleWindowResize: true, 
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,basicWeek,basicDay,agenda'
    },
    eventLimit: true,
    events: empevents          
  });
});

// 模态框关闭时销毁日历，释放资源
document.getElementById('calendarModal').addEventListener('hidden.bs.modal', function () {
  $('#empcalendar').fullCalendar('destroy');
});
</script>

核心注意点： #

• 容器可见性要求：FullCalendar初始化时必须保证容器处于可见状态，因此不能在按钮点击时直接初始化，要等到模态框shown.bs.modal事件触发后再执行渲染逻辑，否则会出现日期显示不全、布局错乱的问题。
• 尺寸适配：给模态框添加modal-lg类（或自定义CSS），确保日历有足够的显示空间，避免元素挤压。
• 重复实例处理：每次模态框显示前销毁旧的日历实例，关闭时也销毁，防止多次点击导致重复渲染或内存泄漏。
• 日期格式优化：优先使用字符串格式的日期（如'2024-01-02'），比直接传递Date对象的兼容性更好，能避免时区解析问题。

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