Javascript 完整日历事件'；s的结束时间不见了

我使用此选项运行Fullcalendar

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

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

我有一些事件（每次30分钟），但只显示它们的开始时间

10:00 -  
14:30 -

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

拖动事件时，其开始时间和结束时间将按原样显示

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

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

---

我认为原因在于，当没有足够的空间在单独的一行上显示标题时（通常情况下，一个事件仅持续30分钟），FullCalendar会将标题放入time div。当时间和标题放在同一个div中时，FullCalendar只将开始时间传递给日期格式化程序

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

要使其正常工作，您可以将fullcalendar.js（1.6.1版）中的行号4020更改为：

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

到

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

如果您不想更改FullCalendar的源代码，可以改为查看回调

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

---

最新答案 在不更改FullCalendar的源代码的情况下修复此问题可能更好，而且实际上，用“正确的方法”进行修复非常简单。但是，

eventRender

并不太有用，因为FullCalendar会在回调后压缩时间和标题，我们的更改将被覆盖

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

幸运的是，可以使用另一个回调：

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);
    }
}

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

---

下面是一个关于JSIDLE的示例：

fullcalendar

2.1xxxx

display

EndTime

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

编辑行

5689

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

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

到

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

---

Regin的答案对我来说并不适用（我假设是FullCalendar的更新版本）

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

我找到了两个解决方案

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

首先，最简单的方法是为短事件保留大部分样式。这会将其设置回默认设置：

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

.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。请注意，这可能会产生其他影响，其中某些小项目的样式会有所不同，但如果这在您的环境中不是一个大问题，那么这将非常有效

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

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

FullCalendar v3.0.0

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

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

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

---

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

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

这是你的电话号码

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

---

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

@Regin Larsen“当时间和标题放在同一个div中时，FullCalendar只将开始时间传递给日期格式化程序。”谢谢，我不知道。是的，我当时也尝试过，直到2019年5月才使用完整日历。它是功能性的。让我知道你的确切要求

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