javascript - 每天的完整日历事件数

Question

我被分配了一项任务，对日程安排约会日历进行小幅更改，此任务的目标是显示每天的约会数量（事件数量可以显示在当天的上方或下方，请参见下面的屏幕截图）。此应用程序使用完整日历 v1.5.4。我正在查看完整的日历文档，但我没有发现任何有用的东西，这个应用程序已经使用了 allDayText，所以它不能在那里应用。

您知道如何在日期标题下方或上方创建一个新行，并在那里添加有关当天发生的事件数量的信息吗？

编辑：

我想出了这段代码，将它添加到 buildSkeleton 方法中。将 7 添加到i所以列具有唯一值。

"<tr>" +
"<th class='fc-agenda-axis " + headerClass + "'>&nbsp;</th>";
for (i = 0; i < colCnt; i++) {
    s += "<th class='fc- fc-col" + i+7 + ' ' + headerClass + "'/>"; 
}
s += "<th class='fc-agenda-gutter " + headerClass + "'>&nbsp;</th>" +
"</tr>" +

这给了我需要的一行，但由于某种原因，它改变了第一列和最后一列的大小。

一旦样式被修复，我将不得不找到一个可以插入许多事件的地方。

Answer 1

下面的函数给出了所需的行为，它会在视图更改时更新事件数。

虽然我无法将标题中第一列和最后一列的大小调整为之前的状态，但正如您在第二个屏幕截图中看到的那样，它们要宽得多。我检查了附加到 fullCalendar 的 css 文件，但没有找到任何东西，它似乎在 fullCalendar.js 文件中更新。

function SetCount(events) {
        var startDate = calendar.getView().start;
        var endDate = calendar.getView().end;
        var e = events.filter(e => e.isBlockAppointment === false && startDate <= e.start && e.start <= endDate);
        var hist = {};

        dates = [];
        e.map(function(a) { dates.push(a.start.getDay()) });
        dates.map(function (a) { if (a in hist) hist[a]++; else hist[a] = 1; });

        var colCnt = getColCnt();
        if (colCnt === 1) {
            $('.Index0').text(Object.keys(hist).length === 0 ? 0 : hist[Object.keys(hist)[0]]);
        } else {
            for (var i = 0; i < colCnt; i++) {
                $('.Index' + i).text(i in hist ? hist[i]: 0);
            }
        }
    }

前：

后：

我尝试将 rowspan="2" 添加到这些行并将它们从第二行中删除，但它不起作用。如何更改这 2 列的大小？

"<th class='fc-agenda-axis " + headerClass + "'>&nbsp;</th>";
"<th class='fc-agenda-gutter " + headerClass + "'>&nbsp;</th>"