jQuery FullCalendar > How to add a button (or link) to only days having events

Question

I am using FullCalendar3.5.1.

I want to add one custom link to event day after all event for the day has been rendered.

If I use eventAfterRender, it display link after each event. So if there are 3 events it display 3 links while I need only one.

eventAfterRender: function(event, element, view) { 
    console.log(event);
    var new_description ='<br/><a href="javascript:dayDetails('+ '&#39;'
    +'template.html' + '&#39;'+',500,400,' + '&#39;'+event.start +'&#39;' 
    +',' + '&#39;'+ 'dayView' + '&#39;' +')">'
    + '<strong>Details</strong>'  + '</a>' + '&nbsp;&nbsp;&nbsp;&nbsp;'
    element.append(new_description); 
}

Answer 1

Here's one approach. An alternative might be to try using clientEvents to retrieve all events and iterate over them.

Updated Jsfiddle to include working, positioned, links.

Working JSFiddle.

First, use the eventRender (or eventAfterRender) callback to flag each event as it is rendered:

eventRender: function(event, element) {
    // Add a class to the event element
    element.addClass('event-on-' + event.start.format('YYYY-MM-DD'));
}

Next, use the eventAfterAllRender callback to iterate over the calendar after all events are rendered, and analyse each day:

eventAfterAllRender: function (view) {
    // This iterates over each visible day
    $('#calendar .fc-day.fc-widget-content').each(function(i) {
        // Fullcalendar includes a date data element on each day
        var date = $(this).data('date');

        // Now we can search for events on this day, using the date
        // and the CSS class we flagged events with
        var count = $('#calendar a.fc-event.event-on-' + date).length;

        // If there are some events on this day, you can add your link.
        if (count > 0) {
            $(this).append('<a class="foo" href="https://google.com/" target="_blank">Go</a>');
        }
    });
}

And lastly some CSS to position your links:

.fc-widget-content {
    position: relative;
}

.foo {
    position: absolute;
    right: 0;
  bottom: 0;
}

This is basically the approach used in this question, which might also be helpful.