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 rule。

然而，相邻事件上的空白堆叠似乎存在问题。这里可以看到一个示例屏幕截图：

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

有没有人克服过这个问题？

Answer 1

在纯CSS中很难完成，而不需要更改FullCalendar的代码。即使您决定更改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并尝试查找没有此问题的另一个日历库。