Fullcalendar资源内Dropdown HTML被日历遮挡问题解决方案

核心原因 #

• 下拉被遮挡本质是两个默认规则导致：
  1. Fullcalendar时间线资源视图的datagrid单元格、滚动容器默认自带overflow: hidden样式，所有插入在单元格内部、超出父容器边界的内容都会被直接裁切
  2. 插入在单元格内部的元素受父容器堆叠上下文限制，无论设置多高的z-index，都无法突破父容器边界浮在日历其他模块上方
• 你当前的实现是直接把下拉HTML整体塞入.fc-datagrid-cell-cushion单元格内部，天然会触发上述裁切规则。Fullcalendar本身没有提供专门的自定义下拉注入配置，不存在遗漏配置项的问题。

可行解决方案 #

方案1：下拉菜单挂载到body节点（推荐，无副作用） #

不要把下拉DOM放在日历组件内部，仅在单元格内放置触发按钮，下拉内容统一挂载到<body>根节点下，完全脱离日历的DOM树和样式限制，从根源避免裁切。
参考实现代码：

resourceGroupLabelDidMount: function(e) {
  const $cell = $(e.el);
  // 单元格内仅放置触发按钮
  const $trigger = $('<button class="custom-action-btn">分组操作</button>');
  $cell.find('.fc-datagrid-cell-cushion').append($trigger);
  
  // 下拉内容挂载到body下，默认隐藏
  const $dropdown = $($('.element').html()).appendTo('body').hide();
  $dropdown.css({ position: 'absolute', zIndex: 9999 });

  // 点击触发按钮时，动态计算位置显示下拉
  $trigger.on('click', function(e) {
    e.stopPropagation();
    const triggerRect = this.getBoundingClientRect();
    $dropdown.css({
      top: triggerRect.bottom + window.scrollY,
      left: triggerRect.left + window.scrollX
    }).toggle();
  });

  // 点击页面其他区域时关闭下拉
  $(document).on('click', () => $dropdown.hide());
}

*如果使用Bootstrap、ElementUI等第三方UI库的下拉组件，直接使用组件提供的「挂载容器」配置项，指定挂载到body即可，无需手动计算位置。

方案2：覆盖默认溢出样式（实现简单，存在副作用） #

如果不想调整DOM挂载逻辑，可以强制覆盖Fullcalendar的默认溢出样式，允许内容超出父容器显示，但该方案可能导致日历滚动区域错位、出现多余滚动条，仅适合简单场景使用：

/* 关闭相关容器的溢出裁切 */
.fc .fc-datagrid-cell-frame,
.fc .fc-scroller,
.fc .fc-datagrid-body {
  overflow: visible !important;
}
/* 给自定义下拉设置足够高的层级 */
.custom-dropdown {
  position: relative;
  z-index: 999 !important;
}

问题效果参考 #

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