Fullcalendar事件的结束时间丢失

Question

我用这个选项运行Fullcalendar

defaultEventMinutes:30,
timeFormat: 'HH:mm { - HH:mm}',

我有一些事件(每个30分钟),但只显示他们的开始时间.

10:00 -  
14:30 -

拖动一个事件时,它的开始和结束时间就像我应该的那样.

10:00 - 10:30  
14:30 - 15:00

Answer 1

Regin的答案对我不起作用(我假设有更新版本的FullCalendar).

我找到了两个解决方案.

首先,最简单的一个维护大多数短期活动的样式.这会将其设置为默认值:

.fc-time-grid-event.fc-short .fc-time span {
    display: inline;
}

.fc-time-grid-event.fc-short .fc-time:before {
    content: normal;
}  

.fc-time-grid-event.fc-short .fc-time:after {
    content: normal;
}

其次,您可以将以下逻辑添加到eventAfterRender.请注意,这可能会产生其他影响,其中小项目的某些样式会有所不同,但如果这在您的环境中不是一个大问题,那么这将完美地运作.

eventAfterRender: function (event, $el, view) {
                $el.removeClass('fc-short');
            }

Answer 2

我认为原因是当没有足够的空间在一个单独的行上显示标题时,FullCalendar将标题放入时间div(通常情况下,事件仅跨越30分钟).当时间和标题放在同一个div中时,FullCalendar只将开始时间传递给日期格式化程序.

要使其工作,您可以在fullcalendar.js(v.1.6.1)中更改以下行号4020:

eventElement.find('div.fc-event-time')
                        .text(formatDate(event.start, opt('timeFormat')) + ' - ' + event.title);

至

eventElement.find('div.fc-event-time')
                        .text(formatDates(event.start, event.end, opt('timeFormat')) + ' - ' + event.title);

如果您不想更改FullCalendar的源代码,则可以查看eventRender回调.

更新的答案

在不改变FullCalendar的源代码的情况下解决这个问题可能更好,而且"以正确的方式"执行它实际上非常简单.但是,eventRender它并不太有用,因为FullCalendar会在此回调后折叠时间和标题,并且我们的更改将被覆盖.

幸运的是eventAfterRender,可以使用另一个回调:

eventAfterRender: function(event, $el, view) {
    var formattedTime = $.fullCalendar.formatDates(event.start, event.end, "HH:mm { - HH:mm}");
    // If FullCalendar has removed the title div, then add the title to the time div like FullCalendar would do
    if($el.find(".fc-event-title").length === 0) {
        $el.find(".fc-event-time").text(formattedTime + " - " + event.title);
    }
    else {
        $el.find(".fc-event-time").text(formattedTime);
    }
}

这是关于jsfiddle的一个例子:http://jsfiddle.net/kvakulo/zutPu/