Question

我正在使用Adam Shaw的 FullCalendar 和knockoutjs。我能够添加，删除和删除事件。在周模式和日期模式中，我想显示为该特定日期添加的事件的总小时数。

enter image description here

如果我删除，重新调整大小或移动某个事件，则应更改上述总时间。

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

Answer 1

为什么不在eventRender事件期间使用global varable跟踪总计来添加它。这样当您移动视图并返回时，它应该正确更新。

即：

var dayTotals = {};

$('#calendar').fullCalendar({
    eventRender: function(event, element, view) {
        dayTotals['dayVariable']++;
        $('day-header').html(dayTotals['dayVariable']);
    }
});

我认为添加活动时会触发该事件。当你删除一个事件时，你需要做类似的事情。

希望有所帮助。

Answer 2

我在这里的问题中发布了答案：fullcalendar: how to add total duration of all events for each day

您可以通过以下方式实现此目的：

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 3

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

FullCalendar：显示每个的总增加活动时间

3 个答案: