Question

升级到jquery fullcalendar的V2之后，我注意到长标题的事件标题已被切断。

我通过添加CSS解决了这个问题，但现在又出现了另一个问题 - 一个标题较长的事件似乎会扩展整行，导致相邻日期出现空白区域，其中包含短标题的事件。

CSS添加

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

请参阅：http://jsfiddle.net/uawsdebv/10/

由于11月12日的长期事件，11月13日的两场比赛之间有一个空行/高度。

我感到茫然 - 有人可以帮忙吗？

Answer 1

由于Calendar HTML结构基于行，因此无法像以前一样浮动元素（为行内最高高度元素设置行高）。

或者你可以这样做，

.fc-day-grid-event > .fc-content {
   white-space: normal;
   text-overflow: ellipsis;
   max-height:20px;
}
.fc-day-grid-event > .fc-content:hover {
   max-height:none!important; 
}

这将默认隐藏标题，当您悬停时，它将完整显示标题。

以下是jsfiddle

的工作原理

Answer 2

基于jQuery Calendar的结构，实际上没有可能实现你想要的东西。这是因为事件在表行中。正如您对问题的第一条评论所述：

在V2.0.0（我使用此版本）和V2.2.6（您正在使用的版本）之间，议程的构建从divs移至{{1} }。如果你将CSS和JS降级到V2.0.0，你会发现你的问题消失了：jsfiddle.net/uawsdebv/12我认为这更像是一个解决方案而不是答案。有可能修改关于标签的CSS，但我在CSS中不够先进，无法知道什么是解决方案。

据我所知，你可能会发现这是解决这个问题的唯一方法。

Answer 3

您的问题没有直接的解决方案。问题在于日历是使用表格构建的。

Answer 4

您的意图在这里违背了表结构的核心操作。

表格行的高度分别对于每一行是恒定的，如果你有一行不同高度的td，那么该行将使它的高度适应最大的td和更小的td＆＃39;该行中的s将在它们与下一行之间留有空白。

您可以使用嵌套表来解决这个问题，这些表基本上使用了td＆＃39;中的表。

Answer 5

似乎问题取决于white-space类中的fc-content属性。就我而言，我已经摆脱了它，如下所示：

.fc-content{white-space:normal}

FullCalendar V2事件标题在月视图中被截断

5 个答案: