fullcalendar: how to add total duration of all events for each day

Question

I have noticed this question asked a few times but with no actual correct answer or good feedback to direct in the right path.

I am using fullcalendar javascript plugin and trying to add the total hours of multiple events for each day which then I will display the sum in the header or footer of each day.

I have tried many different ways to accomplish this but the closest I got to my result is with this code:

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

        }

This works when the calendar is rendered for the first time, but if there is an event change, it will keep adding the totals incorrectly showing very high values. I understand why its adding the totals incorrectly (dateTotal[event.startdate] + +event.totalhrs) but I am hoping someone can help direct me in the right direction to accomplish the correct result.

Appreciate any feedback/help.

Answer 1

I figured out an alternative way to make this work without an Array of dates holding the sum for each day. I hope this helps anyone that has been searching as long as I have.

Keep in mind, this example is only for the month view... there's a few tweaks to make it work for week/day view.

Also, the event must have a total hours object which is used to sum the total. You will see this below as 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);
    }
}

You can use this method to calculate a weekly total as well.

Answer 2

Here's the same solution for 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);
          }
        },