Fullcalendar week view. Display total event minutes per day in the day header

Question

Hello please assist me with this. I have a fullcalendar developed in weekview. I have several events per day where I calculate the duration of each event using:

  var duration = moment.duration(event.end.diff(event.start));
  var mins = duration.asMinutes();
  element.find('.fc-title').append("<span class ='timeduration'>" + " " + mins + " min." + "</span>");

I would appreciate if someone could assist with showing me how I can display total of those mins per day and append to the header of the day.

So for example if this week on Wed I have 2 events showing and one is 20 mins long and another 10 mins long, I want to see total of 30 mins for that day next to Wednesday.

If Friday only has 1 event for 10 mins I want to see 10 in the header near Friday.

Thanks

create a new event for monday that just lists the minutes for the week. or use absolute positioning to hover a div over the spot you want. — I wrestled a bear once.

Max Max · Accepted Answer · 2017-01-09T21:36:33

I am not sure if that would work for you, but column names can be modified by using columnFormat.

Here is a link to documentation: https://fullcalendar.io/docs/text/columnFormat/

It only shows formatting for dates but you can add variables, just be careful with strings as it will parse anything that's related to date formatting.

Example:

('#calendar').fullCalendar({
          views: {
            week: { // name of view
                columnFormat: 'YYYY' + $min
                // other view-specific options here
            }
          }
});

Fullcalendar week view. Display total event minutes per day in the day header

1 Answers