javascript - 每天的完整日历事件数
问题描述
我被分配了一项任务,对日程安排约会日历进行小幅更改,此任务的目标是显示每天的约会数量(事件数量可以显示在当天的上方或下方,请参见下面的屏幕截图)。此应用程序使用完整日历 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>"
推荐阅读
- php - 在 WHMCS 上更新订单状态
- python - 为 Firebase 操作 JSON 文件
- mysql - 如何对子查询进行分组和求和
- flutter - Flutter:正在集成 PayPal 订阅 API 以实现定期付款,但我找不到任何可行的解决方案
- flutter - 颤振 | 扩展 FittedBox 内的 auto_size_text
- python - PySimpleGUIQt - 按下键或按钮作为动作
- scala - 获取 bigquery 表的描述
- javascript - 如何在点击手风琴时激活相应的图像?
- javascript - 如何在 React Native 中调用另一个函数内部的函数
- javascript - 无法在 node.js 中的模块外部使用 import 语句