jQuery FullCalendar > 如何将按钮（或 link）添加到只有有活动的日子

Question

我正在使用 FullCalendar3.5.1。

我想在当天的所有活动都呈现后向活动日添加一个自定义 link。

如果我使用 eventAfterRender，它会在每个事件后显示 link。因此，如果有 3 个事件，它会显示 3 link 秒，而我只需要一个。

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

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

jQuery FullCalendar > 如何将按钮（或 link）添加到只有有活动的日子

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

fullcalendar

fullcalendar-3