每天的完整日歷事件數

Question

我被分配了一項任務，對日程安排約會日歷進行小幅更改，此任務的目標是顯示每天的約會數量（事件數量可以顯示在當天的上方或下方，請參見下面的屏幕截圖）。 此應用程序使用完整日歷 v1.5.4。 我正在查看完整的日歷文檔，但我沒有發現任何有用的東西，這個應用程序已經使用了 allDayText，所以它不能在那里應用。

您知道如何在一天 header 的下方或上方創建一個新行，並在那里添加有關當天發生的事件數量的信息嗎？

編輯：

我想出了這段代碼，將它添加到 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

下面的 Function 給出了所需的行為，它會在視圖更改時更新事件數。

雖然我無法將 header 中第一列和最后一列的大小調整為之前的 state，但正如您在第二個屏幕截圖中看到的那樣，它們要寬得多。 我檢查了附加到 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>"