全日历:如何添加每天所有事件的总持续时间

rub*_*ken 2 javascript jquery fullcalendar

我注意到这个问题问了几次,但没有正确的正确答案或正确的反馈来引导正确的道路。

我正在使用fullcalendar javascript插件,并尝试添加每天多个事件的总时间,然后我将在每天的页眉或页脚中显示总和。

我尝试了许多不同的方法来完成此操作,但最接近结果的是此代码:

eventAfterRender: function(event, element, view) {

            if (event.totalhrs > 0) {
                var sd = event.startdate;

                if (dateTotal.hasOwnProperty(sd)) {
                    dateTotal[event.startdate] = (dateTotal[event.startdate] + +event.totalhrs);
                } else {
                    dateTotal[event.startdate] = +(event.totalhrs);
                }

                $(".fc-day-top[data-date='"+event.startdate+"']").find('.fc-dailytotal').text(dateTotal[event.startdate]);
            }

        }
Run Code Online (Sandbox Code Playgroud)

当第一次渲染日历时,此方法有效,但是如果发生事件更改,它将继续错误地添加总计,显示非常高的值。我理解为什么将其总数相加不正确,(dateTotal[event.startdate] + +event.totalhrs)但是我希望有人可以帮助我朝正确的方向完成正确的结果。

感谢任何反馈/帮助。

rub*_*ken 5

我想出了一种替代方法,可以在不使用包含每天总和的日期数组的情况下进行此工作。我希望这对一直在搜索的人有所帮助。

请记住,此示例仅适用于月视图...需要进行一些调整才能使其适用于周/日视图。

此外,该事件必须有一个总计小时对象,该对象用于总计。您将在下面看到此作为event.totalhrs

viewRender: function(view, element) {
  $.each($(".fc-day-top"), function(key, val) {
    var dateYMD = $(this).attr("data-date");
    $(this).append("<div class='fc-dailytotal' id='dailytotal-"+dateYMD+"'></div>");
  });
},

eventRender: function(event, element, view) {
    $(".fc-dailytotal").text(0); //Clear total sum
},

eventAfterRender: function(event, element, view) {
    var currentday = moment(event.start).format("YYYY-MM-DD");

    if (event.totalhrs > 0) {
      var prev = $("#dailytotal-"+currentday).text() || 0;
      $("#dailytotal-"+currentday).text(+prev + +event.totalhrs);
    }
}
Run Code Online (Sandbox Code Playgroud)

您也可以使用此方法来计算每周总计。

  • 如果您不确定右键单击并检查Chrome日历的标题,则较新的版本为“ fc-day-header”。 (2认同)