javascript 缺少完整日历活动的结束时间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17936259/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fullcalendar event's end time is missing
提问by user1930254
I run Fullcalendar wih this options
我用这个选项运行 Fullcalendar
defaultEventMinutes:30,
timeFormat: 'HH:mm { - HH:mm}',
I have some events (30 min long each), but only their start time is shown.
我有一些活动（每个活动 30 分钟），但只显示了它们的开始时间。
10:00 -
14:30 -
while dragging an event, its start andendtime appears as i should be.
拖动事件时，它的开始和结束时间显示为我应该的样子。
10:00 - 10:30
14:30 - 15:00
采纳答案by Regin Larsen
I think the reason is that FullCalendar puts the title into the time div when there's not enough space to show the title on a separate line (which is typically the case when an event only spans 30 minutes). When the time and the title are placed in the same div, FullCalendar only passes the start time to the date formatter.
我认为原因是当没有足够的空间在单独的行上显示标题时，FullCalendar 将标题放入时间 div 中（当事件仅跨越 30 分钟时通常就是这种情况）。当时间和标题放在同一个 div 中时，FullCalendar 只将开始时间传递给日期格式化程序。
To make it work you could change line number 4020 in fullcalendar.js (v. 1.6.1) from:
为了使其工作，您可以将 fullcalendar.js (v. 1.6.1) 中的行号 4020 更改为：
eventElement.find('div.fc-event-time')
.text(formatDate(event.start, opt('timeFormat')) + ' - ' + event.title);
to
到
eventElement.find('div.fc-event-time')
.text(formatDates(event.start, event.end, opt('timeFormat')) + ' - ' + event.title);
If you don't want to change the source code of FullCalendar, you could instead look into the eventRendercallback.
如果您不想更改 FullCalendar 的源代码，则可以查看eventRender回调。
Updated answer
更新答案
It's probably better to fix this without changing the source code of FullCalendar, and it's actually pretty simple to do it "the right way". However, the eventRenderis not too useful, because FullCalendar collapses the time and title after this callback and our changes would be overwritten.
在不更改 FullCalendar 的源代码的情况下解决这个问题可能会更好，而且“以正确的方式”做到这一点实际上非常简单。但是，这eventRender不是很有用，因为 FullCalendar 在此回调后折叠时间和标题，我们的更改将被覆盖。
Luckily there's another callback eventAfterRenderwhich can be used:
幸运的是，还有另一个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);
}
}
Here's an example on jsfiddle: http://jsfiddle.net/kvakulo/zutPu/
这是 jsfiddle 的一个例子：http: //jsfiddle.net/kvakulo/zutPu/
回答by janpieter_z
The answer of Regin did not work for me (I assume a newer version of FullCalendar).
Regin 的答案对我不起作用（我假设是 FullCalendar 的更新版本）。
I've found two solutions.
我找到了两个解决方案。
First, the easiest one that maintains most of the styling for short events. This styles it back to the defaults:
第一，最简单的一个，它为短事件保留了大部分样式。这将其样式设置回默认值：
.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;
}
Secondly you could add the following logic to the eventAfterRender. Please note this might have other effects where certain styling of small items will be different, but if this is not a big issue in your environment then this works perfectly.
其次，您可以将以下逻辑添加到 eventAfterRender。请注意，这可能会产生其他影响，其中小物品的某些样式会有所不同，但如果这在您的环境中不是大问题，那么这将非常有效。
eventAfterRender: function (event, $el, view) {
$el.removeClass('fc-short');
}
回答by vijay tanakanakal
FullCalendar v3.0.0
全日历 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;
}
回答by Sandeep Garg
In the updated versions of FullCalendar from v 2.4.0 there is an option "displayEventTime" which can be used to set the time whether to display in the events.
在 v 2.4.0 的 FullCalendar 更新版本中，有一个选项“displayEventTime”可用于设置是否在事件中显示的时间。
Here is the link.
这是链接。
By setting this globally one can hide the time being displayed in the events.
通过全局设置，可以隐藏事件中显示的时间。
回答by sayan moltar
fullcalendar 2.1xxxxdisplay end time
全日历2.1xxxx显示end time
edit line 5689
编辑行 5689
return calendar.formatDate(start, opt('timeFormat'));
to
到
return calendar.formatRange(start, end, opt('timeFormat'));
