Question

我在fullcalendar插件中有一个长标题的问题。如果你有一个很长的标题和短的活动时间（例如1天），那么你的活动标题将不合适。

我能用它做什么？

Answer 1

如果要以多行显示标题，可以覆盖fullcalendar默认CSS。

FullCalendar v2.1.1中的默认CSS

.fc-day-grid-event > .fc-content {
   white-space: nowrap;
   overflow: hidden;
}

删除white-space: nowrap;，您的标题将始终可见。

Answer 2

试一试：

eventRender: function(event, element) {
    var limit = 20;
    if (event.title.length > limit) {
        element.find('.fc-event-title').text(event.title.substr(0,limit)+'...').parent().attr('title', event.title);
    }
}

这将裁剪并使用本机浏览器工具提示添加标题。如果你想要你可以使用qtip

eventRender: function(event, element) {
    var limit = 20;
    if (event.title.length > limit) {
        element.find('.fc-event-title').text(event.title.substr(0,limit)+'...');
        element.qtip({
            // qtip options here
        });
    }
}

使用qtip2，因为qtip1将破解jQuery 1.9 + info here

Answer 3

我为MonthView修改了这个：

找到这个功能:(对我而言，它是在＃5381号线上）

function daySegHTML(segs)

在此函数中找到此代码：

html +=
     " class='" + classes.join(' ') + "'" +
     " style='position:absolute;z-index:8;left:"+left+"px;" + skinCss + "'" +

在此之前添加一段代码，因此它应如下所示：

if(event.title.length > 10)
    var eventShortTitle = event.title.substring(0,10) + '...';
else
    var eventShortTitle = event.title;

html +=
     " class='" + classes.join(' ') + "'" +
     " style='position:absolute;z-index:8;left:"+left+"px;" + skinCss + "'" +

然后几行下面找到这段代码：

"<span class='fc-event-title'>" + htmlEscape(event.title) + "</span>" +

替换为：

"<span class='fc-event-title'>" + htmlEscape(eventShortTitle) + "</span>" +

您现在已在月视图中修复了长标题问题。您可以在周视图和日视图中执行相同的操作。

Answer 4

你可以：

更改事件的呈现方式，可以在eventRender（用户可以修改div的回调）或fullcalendar本身的源代码中。
向显示完整标题的日历事件添加工具提示，可能使用qtip。
修改日历的大小并以分钟为单位增加（对于星期视图的议程日），以便在发生这种情况时，较短的事件会占用更多空间。

Answer 5

我对这个问题做了一点点不同的事情：

在fullcallendar的源代码中找到这个部分：

if (seg.contentTop !== undefined && height - seg.contentTop < 10) {
// not enough room for title, put it in the time header
    eventElement.find('div.fc-event-time')
    .text(formatDate(event.start, opt('timeFormat')) + ' - ' + event.title);
(...)

此if正在改变短事件的显示方式。

我刚从源代码中删除了整个if，并将eventAfterRender回调添加到我的js代码中：

eventAfterRender: (function(event, element, view) {
    $(".fc-event").each(function(){
        if ($(this).height() < $(this).find('.fc-event-content').height()) {
            var fcPrevHeight = $(this).height();
            var fcSlideHeight = $(this).height() + $(this).find('.fc-event-content').height();
            $(this).hover(      
                function() {
                    $(this).css('height', fcSlideHeight)
                },
                function() {
                    $(this).css('height', fcPrevHeight);
                }
            )
        }
    })
})

当事件很小并且您无法看到整个事件标题时，此代码会在鼠标结束时更改div的高度，因此您可以获得事件的标题：P

Answer 6

除了版本FullCalendar v2.9.1

的更新外，@ Arron的答案对我来说非常合适

需要找到div而不是fc-title

的.fc-event-title

var titleLimit = 20;
    if (event.title.length > titleLimit) {
        eventElement.find('.fc-title').text(event.title.substr(0,titleLimit)+'...').parent().attr('title', event.title);
    }

Answer 7

以下是其他eventRender个答案的变体，仅适用于月份视图，其中标题被截断最严重：

eventRender: function(event, element, view) {
    var limit = 10;
    if (view.type === 'month' && event.title.length > limit) {
        element.find('.fc-title').parent().attr('title', event.title);
    }
}

Answer 8

您可以使用功能 {eventRender 在事件和标题之间的事件中添加分隔线。

该解决方案仅适用于月视图。

eventRender: function(event, element, view) {
    var limit = 10;
    if (view.type === 'month' && event.title && event.title.length > limit) {
        element.find('.fc-title')[0].insertAdjacentHTML('beforebegin', "<br>");
    }
}

Jquery的插件FullCalendar中的长标题

8 个答案: