Fullcalendar event's end time is missing

Question

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

Answer 1

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

Answer 2

The answer of Regin did not work for me (I assume a newer version of 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: function (event, $el, view) {
                $el.removeClass('fc-short');
            }

Answer 3

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