如何用纯CSS实现跨天日历事件布局？兼容拖拽需求

核心结论 #

仅靠HTML+CSS无法完全实现你的需求。原因在于：

1. 现有结构中.event被包裹在独立的.day-column容器内，CSS无法让一个容器内的元素突破边界，直接影响相邻容器的布局（比如占用下一列的空间）。
2. 动态内容场景下，CSS没有能力感知相邻列的事件数量、高度等信息，无法自动计算并腾出对应位置避免重叠。

你必须借助JavaScript来处理跨天事件的布局冲突，最可靠的方案是通过插入幽灵占位元素或调整DOM结构结合Grid布局实现。

可行解决方案 #

方案1：幽灵占位元素+绝对定位（适配现有HTML结构）

这个方案无需大幅修改你现有的DOM结构，通过JS生成占位元素占据下一列的对应位置，同时用CSS让跨天事件视觉上延伸到下一列。

步骤1：CSS样式调整

.week {
  display: flex;
  position: relative; /* 让绝对定位的事件以week为基准 */
  gap: 12px;
  padding: 20px;
}

.day-column {
  flex: 1;
  min-width: 200px;
  border: 1px solid #e5e7eb;
  padding: 10px;
  position: relative;
}

.event {
  background-color: #dbeafe;
  margin-bottom: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: grab;
}

.event.overnight {
  background-color: #fed7aa;
  /* 开启绝对定位，准备跨列 */
  position: absolute;
  z-index: 1;
}

.ghost-event {
  visibility: hidden;
  margin-bottom: 8px; /* 和.event的margin保持一致 */
}

步骤2：JavaScript逻辑处理

// 处理所有跨天事件
document.querySelectorAll('.event.overnight').forEach(overnightEvent => {
  const parentColumn = overnightEvent.closest('.day-column');
  const nextColumn = parentColumn.nextElementSibling;
  if (!nextColumn) return; // 最后一列无需处理

  // 创建幽灵占位元素，高度和原事件完全一致
  const ghost = document.createElement('div');
  ghost.classList.add('ghost-event');
  ghost.style.height = `${overnightEvent.offsetHeight}px`;

  // 插入到下一列的对应位置（和原事件在父列的索引相同）
  const eventIndex = Array.from(parentColumn.children).indexOf(overnightEvent);
  nextColumn.insertBefore(ghost, nextColumn.children[eventIndex] || null);

  // 设置跨天事件的宽度和位置，覆盖原列和下一列
  const totalWidth = parentColumn.offsetWidth + nextColumn.offsetWidth;
  overnightEvent.style.width = `${totalWidth}px`;
  overnightEvent.style.left = '0';
});

// 拖拽事件的辅助处理（伪代码）
// 当拖拽完成后，判断事件的起始/结束日期，动态添加/移除幽灵元素
function handleDrop(event, targetDate) {
  const isOvernight = /* 判断是否跨天的逻辑 */;
  const currentGhost = event.target.closest('.day-column').nextElementSibling?.querySelector('.ghost-event');
  
  if (isOvernight) {
    // 生成新的幽灵元素（复用上面的逻辑）
  } else {
    // 移除已有的幽灵元素
    currentGhost?.remove();
    // 恢复事件的默认定位
    event.target.style.position = 'static';
    event.target.style.width = 'auto';
  }
}

方案2：重构为Grid布局（更灵活的长期方案）

如果允许调整DOM结构，将事件直接放在.week容器下，用data-start-date和data-end-date标记日期范围，结合CSS Grid可以更优雅地实现跨列效果：

重构后的HTML结构

<div class="week">
  <!-- 日期列容器 -->
  <div class="day-column" data-date="2024-06-03"></div>
  <div class="day-column" data-date="2024-06-04"></div>
  <div class="day-column" data-date="2024-06-05"></div>
  <div class="day-column" data-date="2024-06-06"></div>
  <div class="day-column" data-date="2024-06-07"></div>

  <!-- 事件直接放在week下 -->
  <div class="event" data-start="2024-06-03" data-end="2024-06-03">Event 1</div>
  <div class="event" data-start="2024-06-03" data-end="2024-06-04">Event 2</div>
  <div class="event" data-start="2024-06-03" data-end="2024-06-03">Event 3</div>
  <!-- 其他事件同理 -->
</div>

CSS与JS逻辑

.week {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 20px;
  position: relative;
}

.day-column {
  border: 1px solid #e5e7eb;
  padding: 10px;
}

.event {
  background-color: #dbeafe;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: grab;
  position: absolute;
}

.event[data-start][data-end] {
  /* 由JS计算grid-column和top位置 */
}

// 计算每个事件的位置
const dateColumns = Array.from(document.querySelectorAll('.day-column'));
document.querySelectorAll('.event').forEach(event => {
  const startDate = event.dataset.start;
  const endDate = event.dataset.end;
  const startIndex = dateColumns.findIndex(col => col.dataset.date === startDate);
  const endIndex = dateColumns.findIndex(col => col.dataset.date === endDate);

  // 设置跨列范围
  event.style.gridColumn = `${startIndex + 1} / ${endIndex + 2}`;
  
  // 计算垂直位置（需结合同列事件的高度累加，避免重叠）
  const sameColumnEvents = document.querySelectorAll(`.event[data-start="${startDate}"]`);
  let totalHeight = 0;
  sameColumnEvents.forEach(ev => {
    if (ev === event) return;
    totalHeight += ev.offsetHeight + 8; // 8是margin-bottom
  });
  event.style.top = `${dateColumns[startIndex].offsetTop + totalHeight}px`;
});

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