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以包含工作，定位，链接。

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

这基本上是this question中使用的方法，这可能也会有所帮助。

jQuery FullCalendar＆gt;如何仅在有事件的日子中添加按钮（或链接）

1 个答案: