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 并尝试找到另一个不存在此问题的日历库。