jQuery FullCalendar> 이벤트가있는 날에만 버튼 (또는 링크)을 추가하는 방법

Question

FullCalendar3.5.1을 사용하고 있습니다.

오늘의 모든 이벤트가 렌더링 된 후 이벤트 날에 하나의 맞춤 링크를 추가하고 싶습니다.

eventAfterRender을 사용하면 각 이벤트마다 링크가 표시됩니다. 따라서 이벤트가 3 개인 경우에는 3 개의 링크 만 표시됩니다.

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

하나의 방법이 있습니다. 또 다른 방법은 clientEvents을 사용하여 모든 이벤트를 검색하고 반복하는 것입니다.

업데이트 됨 작업 링크, 위치 지정 링크를 포함합니다.

Working JSFiddle.

가

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

이어서, 모든 이벤트가 렌더링 된 후 일정 반복 할 eventAfterAllRender 콜백을 사용하여 :

첫째, 렌더링 될 때 플래그 각 이벤트를 eventRender (또는 eventAfterRender) 콜백을 사용

,536 : 당신의 연결 위치를

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

그리고 마지막으로 일부 CSS : 매일 분석

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

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

이것은 기본적으로 this question에서 사용되는 접근 방식이며 도움이 될 수도 있습니다.