我接到一个任务,要对日程安排的日历做一些小的改动,这个任务的目标是显示每天的约会次数(事件数可以显示在一天以内的上面,见下面的截图)。这个应用使用的是Full Calendar v1.5.4。我在看完整的日历文档,但我没有找到任何有用的东西,这个应用程序已经利用allDayText,所以它不能应用在那里。
你知道如何才能在日头下方或上方创建一个新行,并在那里添加关于当天发生的事件数量的信息吗?
编辑:我想出了这样的方法。
我想出了这段代码,把它添加到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>" +
这给了我一个我需要的行,但由于某些原因,它改变了第一列和最后一列的大小。
一旦样式将被修复,我将不得不找到一个地方,我可以插入一些事件。
下面的功能给出了所需的行为,它更新事件的数量,每当改变视图。
虽然我不能调整大小的第一列和最后一列在头部到以前的状态,因为你可以看到在第二个截图,他们是宽的方式。我检查了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>"