9

我使用此选项运行 Fullcalendar

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

我有一些活动（每个活动 30 分钟），但只显示了它们的开始时间。

10:00 -  
14:30 -

拖动事件时，它的开始时间和结束时间显示为我应该的样子。

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

5 回答 5

8

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');
            }
于 2015-06-09T10:08:55.233 回答
6

我认为原因是 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/

于 2013-07-30T07:49:26.660 回答
2

全日历 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;
}
于 2016-11-23T06:29:40.887 回答
0

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

这是链接。

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

于 2016-12-14T05:46:48.003 回答
-2

全日历2.1xxxx显示end time

编辑线5689

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

到 

return calendar.formatRange(start, end, opt('timeFormat'));
于 2014-08-30T08:56:11.927 回答