0

我正在使用 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); 
}
4

1 回答 1

2

这是一种方法。另一种方法可能是尝试使用clientEvents来检索所有事件并对其进行迭代。

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

工作 JSFiddle。

首先，使用eventRender(or 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;
}

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

于 2017-10-10T13:52:57.013 回答