更新回答

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/

Answer 3

FullCalendar v3.0.0

.fc-time-grid-event.fc-short .fc-time:before {
  content: attr(data-full);
}

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

Answer 4

在v 2.4.0的FullCalendar更新版本中，有一个选项“displayEventTime”，可用于设置是否在事件中显示的时间。

这是link。

通过全局设置，可以隐藏事件中显示的时间。

Answer 5

fullcalendar 2.1xxxx显示end time

修改专栏5689

return calendar.formatDate(start, opt('timeFormat'));

到

return calendar.formatRange(start, end, opt('timeFormat'));

Fullcalendar事件的结束时间丢失

5 个答案:

更新回答