FullCalendar: Show total added event hours for each

Question

I'm using FullCalendar by Adam Shaw with knockoutjs. I'm able to add, delete and drap-drop events. In week mode and day mode, I want to display the total hours of the events added for that particular day.

If I delete, re-size or move an event, the above total time should get changed.

I have done using DOM manipulation by calculating and appending to the DOM by id. Initially I hardcoded as 0. This works fine for the current view only. If I click next and again come back to the previous dates it gets reset to 0.

Answer 1

why not add it up during the eventRender event using global varable to track the totals. that way when you move views and come back it should update correctly.

i.e.:

var dayTotals = {};

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

I would think that event will fire when you add an event. You'll need to do similar for when you remove an event.

hope that helps.

Answer 2

I've posted the answer in my question here: fullcalendar: how to add total duration of all events for each day

You can achieve this with:

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