在FullCalendar事件中使用Bootstrap5下拉菜单的层级遮挡问题

我用FullCalendar展示人员/志愿者排班，为每个班次添加Bootstrap下拉菜单来放置删除、复制等操作（后续还要新增更多选项，用下拉菜单节省空间）。

目前遇到层级堆叠问题：

• 下拉菜单始终被后续渲染的班次（FullCalendar的events）遮挡，无论设置多大的z-index都无效
• 改为始终向上弹出的dropup后，多数情况可用，但会被FullCalendar的头部遮挡，且从用户体验角度不够直观

已尝试以下方案但均无效：

• 通过Popper配置为下拉菜单设置其他参考元素，如html body、页面其他元素、日历上方的透明浮动div等
• 调整下拉菜单及日历的各类z-index设置

技术栈 #

• Ruby on Rails 8.0
• Bootstrap 5.2
• VueJS 3.5
• FullCalendar 6.1

复现代码（VueJS） #

<script>
import FullCalendar from '@fullcalendar/vue3'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import bootstrap5Plugin from '@fullcalendar/bootstrap5';

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarOptions: {
        plugins: [resourceTimelinePlugin, bootstrap5Plugin],
        initialView: 'resourceTimelineDay',
        schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
        themeSystem: 'bootstrap5',
        resources: [
          { id: 'r1', title: 'Resource 1' }
        ],
        events: [
          { id: '1', resourceId: 'r1', title: 'Event 1', start: '2025-08-26T09:00:00', end: '2025-08-26T11:30:00' },
          { id: '2', resourceId: 'r1', title: 'Event 2', start: '2025-08-26T09:30:00', end: '2025-08-26T12:30:00' }
        ],
      }
    }
  }
}
</script>
<template>
  <FullCalendar :options="calendarOptions">
    <template v-slot:eventContent='arg'>
          <span class="me-1">{{ arg.event.title }}</span>
          <span class="dropdown">
            <button style="color: inherit" class="dropdown-toggle btn btn-sm p-0 px-1" data-bs-toggle="dropdown"></button>
            <ul class="dropdown-menu">
              <li>
                <a class="dropdown-item" href="#">Duplicate</a>
              </li>
              <li>
                <a class="dropdown-item" href="#">No show</a>
              </li>
              <li><hr class="dropdown-divider"></li>
              <li>
                <a class="dropdown-item" href="#">Delete</a>
              </li>
            </ul>
          </span>
    </template>
  </FullCalendar>
</template>

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