Question

我已经注意到这个问题被问了几次，但是没有实际的正确答案或良好的反馈来指导正确的道路。

我正在使用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]);
            }

        }

这在第一次呈现日历时有效，但如果有事件发生更改，则会不断添加错误显示非常高的值。我理解为什么它错误地添加总数(dateTotal[event.startdate] + +event.totalhrs)但我希望有人可以帮助我指导正确的方向来完成正确的结果。

感谢任何反馈/帮助。

Answer 1

我想出了一种替代方法，可以让这项工作没有包含每天总和的日期数组。我希望这能帮助那些一直在寻找的人。

请注意，此示例仅适用于月视图...有一些调整可以使其适用于周/日视图。

此外，该事件必须具有总小时对象，用于对总计进行求和。您会在下面看到 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);
    }
}

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

Answer 2

以下是 fullcalendar v5 的相同解决方案：

datesSet: function(dateInfo) {
          $.each($(".fc-col-header-cell.fc-day"), function(key, val) {
            var dateYMD = $(this).attr("data-date");
            $(this).append("<div class='fc-dailytotal' id='dailytotal-" + dateYMD + "'></div>");
          });
          $(".fc-dailytotal").html(0);
        },

        eventDidMount: function(info) {
          var currentday = moment(info.event.start).format("YYYY-MM-DD");
          if (info.event._def.extendedProps.totalhrs > 0) {
            var prev = parseInt($("#dailytotal-" + currentday).html()) || 0;
            $("#dailytotal-" + currentday).html(prev + info.event._def.extendedProps.totalhrs);
            console.log(info.event._def.extendedProps.totalhrs);
          }
        },

fullcalendar：如何为每天添加所有事件的总持续时间

2 个答案: