全日历相邻事件与具有多行标题的事件奇怪地堆叠在一起

Question

我正在将使用全日历 1.x 的网页转换为全日历 2.x。似乎使用新的布局样式，日历主要是为单行事件构建的，或者至少是相似的高度。为了解决单行标题问题，流行的解决方案似乎是：https://code.google.com/p/fullcalendar/issues/detail?id=1992，特别是

.fc-day-grid-event > .fc-content {
  white-space: normal;
}

CSS 规则。

但是，相邻事件上的空白堆叠似乎存在问题。可以在此处看到示例屏幕截图：

可以在此处找到具有类似问题的 jsbin： http://jsbin.com/vegopabegu/2/edit .我要删除的空格在此屏幕截图中突出显示：http://screencast.com/t/k7wvF9JPOtM 。我还没有找到一种好方法来对这些事件进行后期处理，以更有效地堆叠它们并避免由不同高度生成的空格。

有没有人克服这个问题？

Answer 1

如果不更改 FullCalendar 的代码，这在纯 CSS 中很难实现。即使您决定更改FullCalendar代码，这仍然很难实现。这是由于表用于呈现日历这一事实引起的。要删除的空格是由于所有这些事件都填充在一个表行上。让 FullCalendar 正确使用表格并使用div 堆叠事件是很难做到的。我找不到任何尝试过这个并成功做到这一点的人。

我现在能想到的唯一简单解决方案是给事件提供相同的高度，这样空白就不会显示：

a.fc-event{
  height: 34px;
}

看这里： http://jsbin.com/cudovagasu/1

另一种解决方案是删除蓝色背景，使空白变得不可见：

a.fc-event{
  background-color: transparent;
  border-color: transparent;
  color: black;
}
a.fc-event:hover{
  color: #3a87ad;
}

看这里： http://jsbin.com/cudovagasu/2

另一种可能的解决方案是删除FullCalendar并尝试查找另一个没有此问题的日历库。