Fullcalendar事件的结束时间缺失

本文介绍了Fullcalendar事件的结束时间缺失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

使用此选项运行Fullcalendar

defaultEventMinutes：30， timeFormat：'HH：mm { - HH ：mm}'，

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

10:00 - 14:30 -

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

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

解决方案

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

为了使它工作，您可以将行号改为4020 fullcalendar.js（v。1.6.1）from：

eventElement.find（'div.fc-event-time'） .text（formatDate（event.start，opt（'timeFormat'））+' - '+ event.title）;

至

<$ （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}）; //如果FullCalendar已经删除了标题div，那么将标题添加到时间格中，例如FullCalendar将执行 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）; $ b

这里是一个关于jsfiddle的例子： jsfiddle/kvakulo/zutPu/

I run Fullcalendar wih this options

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

I have some events (30 min long each), but only their start time is shown.

10:00 - 14:30 -

while dragging an event, its start and endtime appears as i should be.

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

解决方案

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.

To make it work you could change line number 4020 in fullcalendar.js (v. 1.6.1) from:

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 eventRender callback.

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 eventRender is not too useful, because FullCalendar collapses the time and title after this callback and our changes would be overwritten.

Luckily there's another callback eventAfterRender which can be used:

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: jsfiddle/kvakulo/zutPu/