CODEWITHSUNDEEP
fullcalendar
Sforzando
Sforzando

Reputation: 3

Is there a simple way to show event end time on agendaWeek for hourly slots?

I would like to show displayEventEnd in agendaWeek view. By default it only shows on any entries longer than an hour, but for anything less it just shows the start time. Is there a simple way to do this so it shows on both longer and shorter entries for this view type?

Upvotes: 0

Views: 1556

Answers (1)

MurkyMuck
MurkyMuck

Reputation: 126

Use the eventAfterRender callback to update title.

eventAfterRender: function(event, $el, view) {
    // only on agendaWeek view
    if( 'agendaWeek' === view.name ) {
        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 copied from: Regin Larsen - Fullcalendar event's end time is missing

EDIT: fullCalendar 2.8.0 it seems that the HTML layout has changed. Updated fiddle and code.

Here is the updated fiddle: Updated fiddle fullCalendar 2.8.0

eventAfterRender: function(event, $el, view ) {
    var formattedTime = $.fullCalendar.formatRange(event.start, event.end, "HH:mm");
    // if event has fc-short class, data-start value will be displayed
    // remove fc-short class and update fc-time span text
    if($el.is('.fc-short') ) {
        $el.find(".fc-time span").text(formattedTime + " - " + event.title);
        $el.removeClass('fc-short');
        $el.find('.fc-title').remove();
    }
}

Upvotes: 2

Related Questions