Javascript FullCalendar：显示每个项目的总添加事件小时数

我正在使用Adam Shaw的FullCalendar和knockoutjs。我可以添加、删除和拖放事件。在周模式和日模式中，我希望显示为该特定日期添加的事件的总小时数

如果我删除、重新调整或移动一个事件，上述总时间应该更改

---

我已经使用DOM操作，通过id计算并附加到DOM。最初我硬编码为0。这仅适用于当前视图。如果我单击“下一步”并再次返回到以前的日期，它将重置为0

为什么不在eventRender事件期间使用全局变量将其相加以跟踪总数。 这样，当您移动视图并返回时，它应该会正确更新

i、 e:

我认为当您添加事件时，该事件将触发。删除事件时，需要执行类似操作

---

希望这能有所帮助。

我在这里发布了我问题的答案：

您可以通过以下方式实现这一点：

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);
    }
}

viewRender:函数（视图，元素）{
$.each（$（“.fc day top”），功能（键，val）{
var dateYMD=$（this.attr（“数据日期”）；
$（此）。追加（“”）；
});
},
eventRender:函数（事件、元素、视图）{
$（“.fc dailytotal”）.text（0）；//清除总和
},
eventAfterRender:函数（事件、元素、视图）{
var currentday=时刻（事件开始）。格式（“YYYY-MM-DD”）；
如果（event.totalhrs>0）{
var prev=$（“#每日总计-”+currentday）.text（）| 0；
$（“#dailytotal-”+currentday）.text（+prev++event.totalhrs）；
}
}

viewRender:函数（视图，元素）{
//初始每日总元素
$.each（$（“.fc day header”），函数（键，val）{
var dateYMD=$（this.attr（“数据日期”）；
$（此）。追加（“”）；
});
},
eventAfterAllRender:函数（视图）{
//提供每日总计
如果（！$this.$calendarObj）返回；
var events=$this.$calendarObj.fullCalendar（'clientEvents'）；
var dailyTotals={}；
var i；
对于（i=0；i=e.end）{
var duration=时刻、持续时间（e.end.diff（e.start））.asHours（）；
var dateYMD=e.start.startOf（'day'）。格式（“YYYY-MM-DD”）；
dailyTotals[dateYMD]=（dailyTotals[dateYMD]| | 0）+持续时间；
}
}
$.each（$（'[id^=dailytotal-]'）、函数（键，val）{
var elem=$（本）；
var dateYMD=$（this.attr（“数据日期”）；
var dayTotal=dailyTotals[dateYMD]| | 0；
要素文本（dayTotal+h'）；
});
}

能否显示日历代码、获取活动的方法以及如何计算小时数？

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);
    }
}

viewRender: function (view, element) {
            // init daily total elements
            $.each($(".fc-day-header"), function (key, val) {
                var dateYMD = $(this).attr("data-date");
                $(this).append("<div class='text-lowercase'><span class='fc-dailytotal' data-date='"+dateYMD+"' id='dailytotal-" + dateYMD + "'></span></div>");
            });
        },
eventAfterAllRender: function (view) {
            // render daily totals
            if (!$this.$calendarObj) return;
            var events = $this.$calendarObj.fullCalendar('clientEvents');
            var dailyTotals = {};
            var i;
            for (i = 0; i < events.length; i++) {                   
                var e = events[i];
                if (view.start < e.start && view.end >= e.end) {
                    var duration = moment.duration(e.end.diff(e.start)).asHours();
                    var dateYMD = e.start.startOf('day').format("YYYY-MM-DD");
                    dailyTotals[dateYMD] = (dailyTotals[dateYMD] || 0) + duration;
                }
            }

            $.each($('[id^=dailytotal-]'), function (key, val) {
                var elem = $(this);
                var dateYMD = $(this).attr("data-date");
                var dayTotal = dailyTotals[dateYMD] || 0;
                elem.text(dayTotal + 'h');
            });
        }