[英]Full Calendar number of events per day
我被分配了一项任务,对日程安排约会日历进行小幅更改,此任务的目标是显示每天的约会数量(事件数量可以显示在当天的上方或下方,请参见下面的屏幕截图)。 此应用程序使用完整日历 v1.5.4。 我正在查看完整的日历文档,但我没有发现任何有用的东西,这个应用程序已经使用了 allDayText,所以它不能在那里应用。
您知道如何在一天 header 的下方或上方创建一个新行,并在那里添加有关当天发生的事件数量的信息吗?
编辑:
我想出了这段代码,将它添加到 buildSkeleton 方法中。 将 7 添加到i
所以列具有唯一值。
"<tr>" +
"<th class='fc-agenda-axis " + headerClass + "'> </th>";
for (i = 0; i < colCnt; i++) {
s += "<th class='fc- fc-col" + i+7 + ' ' + headerClass + "'/>";
}
s += "<th class='fc-agenda-gutter " + headerClass + "'> </th>" +
"</tr>" +
这给了我需要的一行,但由于某种原因,它改变了第一列和最后一列的大小。
一旦样式被修复,我将不得不找到一个可以插入许多事件的地方。
下面的 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 + "'> </th>";
"<th class='fc-agenda-gutter " + headerClass + "'> </th>"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.