jQuery FullCalendar> Wie füge ich eine Schaltfläche (oder Link) nur zu Tagen mit Ereignissen hinzu

Question

Ich benutze FullCalendar3.5.1.

Ich möchte einen benutzerdefinierten Link zum Ereignistag hinzufügen, nachdem alle Ereignisse für den Tag gerendert wurden.

Wenn ich eventAfterRender verwende, zeigt es Verbindung nach jedem Ereignis an. Also, wenn es 3 Ereignisse gibt, zeigt es 3 Links an, während ich nur eins brauche.

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

Hier ist ein Ansatz. Eine Alternative könnte sein, zu versuchen, clientEvents zu verwenden, um alle Ereignisse abzurufen und über sie zu iterieren.

Aktualisiert Jsfiddle enthält funktionierende, positionierte Links.

Working JSFiddle.

Verwenden Sie zuerst die eventRender (oder eventAfterRender) Rückruf-Flag jedes Ereignis, wie es gemacht wird:

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

Als nächstes verwenden Sie den eventAfterAllRender Rückruf über den Kalender zu durchlaufen, nachdem alle Ereignisse wiedergegeben werden, und analysieren jeden Tag:

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

Und schließlich einige CSS Ihre Links zu positionieren:

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

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

Dies ist im Grunde der Ansatz in this question, der auch hilfreich sein kann.