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 检索所有事件并循环访问它们。

更新了 Jsfiddle 以包括工作、定位、链接。

工作 JSFiddle。

首先，使用 eventRender（或 eventAfterRender）回调在呈现每个事件时对其进行标记：

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

接下来，在呈现所有事件后，使用 eventAfterAllRender 回调循环访问日历，并每天进行分析：

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

这基本上是这个问题中使用的方法，也可能有所帮助。