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

Question

我正在将使用 fullcalendar 1.x 的网页转换为 fullcalendar 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 并尝试找到另一个没有此问题的日历库。