Requisito: Sume un accesorio extendido en 0..n eventos en cada celda de día
Entiendo que hay ganchos de procesamiento de celdas diurnas, como el gancho de contenido de celdas diurnas, entre otros ganchos que podemos utilizar para lograr esto. El enlace de contenido de la celda de día parece muy prometedor, pero no funciona cuando los eventos no están todos en la memoria y se cargan de forma asíncrona porque las celdas de día se procesan antes de que se devuelvan los datos. No pude encontrar una buena manera de evitar esto, salvo quizás volver a representar todo el calendario cuando se devuelven los datos.
Aquí hay un código de ejemplo que hace parte de la lógica en el caso de que los eventos ESTÉN EN LA MEMORIA, NO FUNCIONA PARA EVENTOS ASINCRONICOS (VueJS, pero debería ser similar para 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 }Pensando en voz alta, casi parece que sería intuitivo tener los eventos de los días como parte del argumento para el enlace de procesamiento de la celda del día, pero entiendo que están desacoplados entre sí.
Pregunta: ¿Cómo puedo agregar valores de múltiples eventos para un día/fecha determinado?
Aunque un poco desordenado, lo siguiente fue cómo terminé logrando esto. Tenga en cuenta que al usar los ganchos de procesamiento de celdas diurnas (creo que dayCellContent), primero agregué un contenedor al DOM a través de la función injectCellContent. Se llamó a addEmployeeCounts cuando los eventos de origen se recuperaron correctamente a través de la devolución de llamada. La condición para los eventos nativos era necesaria para volver a representar los conteos en caso de que se cambiara el tamaño o se moviera un solo día, nuevamente usando devoluciones de llamada a través de las opciones de calendario completo.
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); } },