完整的日历每天的活动数量

问题描述 投票:0回答:1

我接到一个任务,要对日程安排的日历做一些小的改动,这个任务的目标是显示每天的约会次数(事件数可以显示在一天以内的上面,见下面的截图)。这个应用使用的是Full Calendar v1.5.4。我在看完整的日历文档,但我没有找到任何有用的东西,这个应用程序已经利用allDayText,所以它不能应用在那里。

你知道如何才能在日头下方或上方创建一个新行,并在那里添加关于当天发生的事件数量的信息吗?

enter image description here

编辑:我想出了这样的方法。

我想出了这段代码,把它添加到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>" +

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

一旦样式将被修复,我将不得不找到一个地方,我可以插入一些事件。

enter image description here

javascript html css fullcalendar fullcalendar-1
1个回答
0
投票

下面的功能给出了所需的行为,它更新事件的数量,每当改变视图。

虽然我不能调整大小的第一列和最后一列在头部到以前的状态,因为你可以看到在第二个截图,他们是宽的方式。我检查了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);
            }
        }
    }

之前的情况Before

之后enter image description here

我试着给这些行添加rowspan="2",然后把它们从第二行移走,但是没有用。我怎样才能改变这2列的大小?

"<th class='fc-agenda-axis " + headerClass + "'>&nbsp;</th>";
"<th class='fc-agenda-gutter " + headerClass + "'>&nbsp;</th>"
© www.soinside.com 2019 - 2024. All rights reserved.