Missing end of Fullcalendar event

Question

I run Fullcalendar with these options

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

I have several events (30 minutes each), but only the time of their start is shown.

 10:00 - 14:30 - 

when you drag an event, its beginning begins and , as it should be.

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

Answer 1

I think the reason is that FullCalendar places the title during the div when there is not enough space to display the title on a separate line (which usually happens when the event spans 30 minutes). When the time and title are placed in the same div, FullCalendar only passes the start time of the date formatting.

To do this, you can change the 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 can look at the eventRender callback eventRender .

---

Updated Answer

It is probably best to fix this without changing the source code of FullCalendar, and in fact it’s pretty simple to do it in the “right way”. However, eventRender not very useful, because FullCalendar destroys the time and title after this callback, and our changes will be overwritten.

Fortunately, there is another eventAfterRender that you can use:

 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 is a jsfiddle example: http://jsfiddle.net/kvakulo/zutPu/

Answer 2

Regin's answer did not work for me (I assume a newer version of FullCalendar).

I found two solutions.

Firstly, the simplest one that supports most of the style for short events. This styles it by default:

 .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 can add the following logic to eventAfterRender. Please note that this may have other effects when a certain style of small items will be different, but if this is not a big problem in your environment, then this works great.

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

Answer 3

In updated versions of FullCalendar from version 2.4.0 there is an option "displayEventTime", which can be used to set the time displayed in events.

Here is the link .

By setting this globally, you can hide the time displayed in events.

Answer 4

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 5

fullcalendar 2.1xxxx display end time

change line 5689

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

to

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