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

【问题标题】：FullCalendar V2 Event Title cut off in month viewFullCalendar V2 事件标题在月视图中被截断
【发布时间】：2015-10-29 05:39:06
【问题描述】：

升级到 jquery fullcalendar V2 后，我注意到带有长标题的事件的标题被截断了。

我通过添加 CSS 解决了这个问题，但现在出现了另一个问题 - 具有长标题的事件似乎扩展了整行，导致在具有短标题事件的相邻日期出现空白。

添加了 CSS

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

见：http://jsfiddle.net/uawsdebv/10/

11 月 13 日的 2 个事件之间有一个空行/高度，这是由于 11 月 12 日的长事件造成的。

我不知所措 - 谁能帮忙？

【问题讨论】：

在 V2.0.0（我正在使用这个）和 V2.2.6（你正在使用的那个）之间，议程的构建从 divs 移动到了 tables。如果您将 CSS 和 JS 降级到 V2.0.0，您会发现您的问题消失了：jsfiddle.net/uawsdebv/12 我认为这更像是一种解决方法而不是答案。可能可以修改与 <tr> 标记有关的 css，但我在 css 方面不够先进，不知道什么是解决方案。
事件在单独的表格行中。您无法使用此 html 获得所需的布局。您能做的最好的事情是缩小字体大小，并将您的“空白：继承”更改为“文本溢出：省略号”。

标签： jquery css fullcalendar

【解决方案1】：

由于日历 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

【讨论】：

【解决方案2】：

您可以为每个事件指定最大高度并使用文本溢出省略号。使用 title html 属性可以在鼠标悬停时显示整个事件标题。 //css

    .fc-day-grid-event > .fc-content {
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer; // for showing title 
    max-height:20px; // can be adjusted according to your requirement
}

//jquery

$(".fc-content").each(function(){
  $(this).attr("title",$(this).text());
  })

这是有效的jsFiddle 链接

【讨论】：

【解决方案3】：

基于 jQuery Calendar 的结构，真的没有办法实现你想要的。这是因为事件位于表行中。正如对您问题的第一条评论所述：

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

据我所知，您可能会看到这是解决此问题的唯一方法。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

您的意图与表结构的核心操作背道而驰。

表格行的高度对于每一行都是恒定的，如果一行中有不同高度的 td，那么该行将使其高度适应最大的 td，而该行中较小的 td 将在它们和下一个之间有空白空间行。

您可以使用嵌套表来解决这个问题，这实际上是使用 td 中的表。

【讨论】：

【解决方案6】：

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

.fc-content{white-space:normal}

【讨论】：