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 on

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/