APEX+FullCalendar：单元格能否设置多个不重叠的background区块？

完全可行，给你一套适配FullCalendar 6.1.15版本的实操方案：

核心思路 #

通过FullCalendar的eventDidMount钩子监听背景事件渲染完成，结合CSS调整每个背景事件的高度和位置，让它们在单元格内垂直均分空间，避免重叠。

具体步骤 #

1. 统一标记背景事件
   在事件数据源中，给所有background类型的事件添加自定义类名，方便后续选中元素：

   events: [
     {
       title: '背景任务1',
       start: '2024-05-20',
       display: 'background',
       className: 'custom-bg-event'
     },
     {
       title: '背景任务2',
       start: '2024-05-20',
       display: 'background',
       className: 'custom-bg-event'
     }
     // 更多背景事件...
   ]
   

2. 动态调整事件布局
   在FullCalendar初始化时加入eventDidMount钩子，计算当前单元格内的背景事件数量，分配每个事件的高度和偏移：

   var calendar = new FullCalendar.Calendar(calendarEl, {
     // 你的日历基础配置（视图、头部按钮等）
     events: 你的事件数据源,
     eventDidMount: function(info) {
       if (info.event.display === 'background') {
         var cell = info.el.parentElement;
         var allBgEvents = cell.querySelectorAll('.custom-bg-event');
         var totalEvents = allBgEvents.length;
         
         if (totalEvents > 1) {
           var eventHeight = 100 / totalEvents + '%';
           var eventIndex = Array.from(allBgEvents).indexOf(info.el);
           var topOffset = eventIndex * (100 / totalEvents) + '%';
           
           info.el.style.position = 'absolute';
           info.el.style.height = eventHeight;
           info.el.style.top = topOffset;
           info.el.style.left = '0';
           info.el.style.right = '0';
           info.el.style.margin = '0';
         }
       }
     }
   });
   calendar.render();
   

3. 补充CSS优化样式
   在页面CSS区域添加以下样式，确保布局生效：

   .custom-bg-event {
     opacity: 0.7;
     box-sizing: border-box;
     border: 1px solid rgba(0,0,0,0.1);
   }
   

APEX集成注意事项 #

在APEX中，可将上述JS代码放到FullCalendar插件的「JavaScript初始化代码」属性中，或创建「页面加载时」的动态动作，将代码作为JavaScript执行。

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