Requirement: Total an extended prop on 0..n events on every day cell
I understand there are day cell render hooks like day cell content hook among other hooks that we can utilize to accomplish this. The day cell content hook looks very promising, but fails to work when the events are not all in memory and are rather loaded asynchronously because the daycells render before the data is returned. I could not find a good way to work around this short of perhaps rerendering the entire calendar when the data is returned.
Here is some example code that does some of the logic in the case the events ARE IN MEMORY, DOES NOT WORK FOR ASYNCHRONOUS EVENTS (VueJS, but should be similar for Vanilla):
injectCellContent: function(arg) { // this is the day cell content hook
let CalendarAPI = this.$refs.calendar.getApi();
let events = CalendarAPI.getEvents();
let thisDate = moment(arg.date);
let thisDaysEvents = events.filter(event => moment(event.start).isSame(thisDate, 'day'));
console.log(thisDaysEvents); // aggregate the values for events on this day
}
Thinking out loud, it almost feels like it would be intuitive to have the days events as part of the argument for the day cell render hook, but I understand they are decoupled from each other.
Question: How can I aggregate values from multiple events for a given day/date?
Although a little messy, the following was how I ended up achieving this. Note that using the day cell render hooks (dayCellContent, I believe), I first added a container to the DOM via injectCellContent function. addEmployeeCounts was called upon the source events refetching successfully via callback. The condition for native events was needed to rerender the counts in the event that a single day was resized or moved, again using callbacks via fullcalendar options.
getHolderId: function(targetDate) {
return "batch-calendar__employee-count__" + moment(targetDate, 'yyyy-mm-dd');
},
injectCellContent: function(arg) {
let holder = document.createElement("div");
holder.className = "batch-calendar__employee-count";
holder.id = this.getHolderId(arg.date);
arg.el.append(holder);
},
addEmployeeCounts: function(batchEvents, useNativeEvents) {
let CalendarAPI = this.$refs.calendar.getApi();
let activeStart = moment(CalendarAPI.view.activeStart);
let activeEnd = moment(CalendarAPI.view.activeEnd);
// loop through batchEvents by day and total employee count
for (var m = moment(activeStart); m.isBefore(activeEnd); m.add(1, 'days')) {
let holderID = this.getHolderId(m);
let holder = document.getElementById(holderID);
holder.innerHTML = "";
let totalEmployeesForDay = 0;
if (useNativeEvents) {
let nativeEvents = CalendarAPI.getEvents();
let nativeEventsCount = nativeEvents.length;
for (var i = 0; i < nativeEventsCount; i++) {
let thisEvent = nativeEvents[i];
if (moment(m).isBetween(thisEvent.start, thisEvent.end, undefined, '[)')) {
totalEmployeesForDay += thisEvent.extendedProps.service_order_item.project.employees_needed;
}
}
} else {
let batchCount = batchEvents.length;
for (var i = 0; i < batchCount; i++) {
let thisEvent = batchEvents[i];
if (moment(m).isBetween(thisEvent.start, thisEvent.end, undefined, '[)')) {
totalEmployeesForDay += thisEvent.service_order_item.project.employees_needed;
}
}
}
let holderIcon = document.createElement("span");
holderIcon.className = "fa fa-user mr-1";
holder.append(holderIcon)
holder.append(totalEmployeesForDay);
}
},