使用position: absolute实现日历事件时重叠问题的技术咨询

嘿，我来帮你搞定这个日历事件互相遮挡的问题！咱们先理清楚当前的问题：你用position: absolute定位事件，但所有事件都设了left: 0和width: 100%，所以同一时间段的事件会完全重叠在一起，自然就互相遮挡了。要实现同一时间段多事件各占对应宽度的效果，咱们需要分几步来调整：

核心思路 #

首先得把同一时间段内重叠的事件归为一组，然后对组内的每个事件计算对应的left偏移量和width宽度——比如组里有2个事件，每个就占50%宽度，第一个left: 0，第二个left: 50%；如果有3个事件，每个占约33.33%，以此类推。

具体实现步骤 #

1. 给事件分组：找出重叠的事件组 #

在你的组件逻辑里，先写一个方法把重叠的事件归类。假设你的calendarEvents是事件数组，每个事件有start和end时间属性：

// 找出所有重叠的事件组
getOverlappingEventGroups(): any[][] {
  const sortedEvents = [...this.calendarEvents].sort((a, b) => a.start.getTime() - b.start.getTime());
  const groups: any[][] = [];

  sortedEvents.forEach(event => {
    // 找当前事件能加入的已有组
    const group = groups.find(g => {
      // 检查当前事件是否和组内最后一个事件重叠
      const lastEvent = g[g.length - 1];
      return event.start < lastEvent.end;
    });

    if (group) {
      group.push(event);
    } else {
      groups.push([event]);
    }
  });

  return groups;
}

2. 计算每个事件的left和width #

再添加两个方法，分别计算单个事件的偏移量和宽度：

// 计算事件的left偏移量
calcLeft(event: any): string {
  const groups = this.getOverlappingEventGroups();
  const group = groups.find(g => g.includes(event));
  if (!group) return '0';
  const index = group.indexOf(event);
  const widthPercent = 100 / group.length;
  return `${index * widthPercent}%`;
}

// 计算事件的宽度
calcWidth(event: any): string {
  const groups = this.getOverlappingEventGroups();
  const group = groups.find(g => g.includes(event));
  if (!group) return '100%';
  return `${100 / group.length}%`;
}

3. 修改模板绑定样式 #

把原来的模板更新，加上left和width的样式绑定：

<div class="event" 
     [style.top]="calcTop(calendarEvent)" 
     [style.height]="calcHeight(calendarEvent)"
     [style.left]="calcLeft(calendarEvent)"
     [style.width]="calcWidth(calendarEvent)">
  <div>{{ calendarEvent.name }}</div>
</div>

4. 调整CSS样式 #

去掉对绝对定位无效的clear: both，添加box-sizing: border-box确保边框不会撑宽元素，同时可以适当调整z-index避免不必要的层级遮挡：

.event {
  position: absolute;
  top: 0;
  background-color: mat-color($app-primary, 600);
  text-align: center;
  border: #000 solid 1px;
  color: #fff;
  z-index: 10;
  box-sizing: border-box; /* 确保边框包含在宽度内 */
}

效果说明 #

这样处理后，同一时间段的事件会自动平分宽度，不会再互相遮挡——比如两个重叠事件各占50%宽度左右排列，三个重叠事件各占约33.33%依次排列，完美符合你的需求！

内容的提问来源于stack exchange，提问作者Bálint Bakos