Fullcalendar：如果添加了一些 html 并且呈现了太多事件，则 agendaWeek 视图中的列将被销毁

Question

我在 Salesforce 的 Visualforce 页面上使用全日历。

我想在 agendaDay、agendaWeek 和 Month views 的每一天添加一个小按钮 +（在列的顶部，在 All day行）。

它在 Month 和 agendaDay 视图上工作正常。但是当谈到 agendaWeek 视图时，只有在全天线中有几个事件时它才能正常工作。如果有足够的事件触发 +3 more 或 +X more，事件和 + 按钮将被拆分，并且整个 table 被破坏，因为它使列数加倍（7仅包含事件的列，以及仅包含按钮的 7 列）。

当这个“+X more”出现时，table 的 CSS 似乎发生了变化，但我不知道如何检测它并调整我的代码。

这 JSFiddle 显示了问题所在。（在议程视图中查看全天活动）。

Answer 1

看来是FC的bug（或者不支持）

FullCalendar 使用奇怪的 table 结构呈现 allDay 事件。您可以使用浏览器的开发工具查看它。

它所做的其中一件事是创建 allDay 事件 table (.fc-day-grid .fc-content-skeleton table) 的第一行，每列上有 rowspan=maxNumOfEventsDuringWeek。问题是它使用的是实际事件数，而不是 visible 事件数。

因此，如果您有 3 个事件，它会设置 rowspan=3，这是有效的。但是，如果您有 10 个事件，它会设置 rowspan=10，即使当 eventLimit 打开时只有 4 个是可见的。

这通常不会导致问题，但是当您向 table 添加另一行时，上面的行将其推到一边，"broke it".

可能的修复

如果您真的执着于当前的代码，可以将一些代码添加到 "fix" 和 rowspan。我不推荐这个，因为它太 hacky 并且不会是 stable.

但基本上，您会：

计算可见事件的数量
更改第一行每一列的 rowspan 属性

更好的选择

我们只添加一个绝对定位的 link，而不是向 table 添加一行。这是 eventAfterRender 函数（我也将其缩短）：

eventAfterAllRender: function (view) {
    var addPlusToDay = function (dayOfWeek) { // Adds a button to a day number (1 through 7)
        var day = moment(view.start).add(dayOfWeek, 'd');
        var plus = j$('<a href="/path/file.jsp?date=' + day.format('L') +
                    '" target="_parent" class="addLink"' +
                     ' style="display: block; position:absolute; bottom:0px;">'+
                     '<img src="/image/s.png" alt="Ajouter un événement - ' + day.format('L') +
                     '" class="addNewEventIcon" title="Ajouter un événement - ' + day.format('L') +
                     '" style="margin-right:0px;"></a>');
        plus.appendTo(j$('#calendar .fc-day-grid .fc-content-skeleton tbody tr:first td:not(.fc-axis)').get(dayOfWeek));
    }
    if (view.name == 'agendaWeek') {
        var days = [0, 1, 2, 3, 4, 5, 6, 7];
        $.each(days, addPlusToDay);
    }
    if (view.name == 'agendaDay') {
        addPlusToDay(0);
        var dateParam = view.start;
        generateActivitiesTable(dateParam, 'dayView');*/
    }
}

这里是 demo。

还要注意演示中的 CSS，它修复了一些格式问题。

Fullcalendar：如果添加了一些 html 并且呈现了太多事件，则 agendaWeek 视图中的列将被销毁

Fullcalendar : columns are destroyed in agendaWeek view if some html is added and too many events are rendered

javascript

jquery

salesforce

fullcalendar

visualforce