javascript - 特定日期所有事件的总特定属性 - Fullcalendar

Question

要求:在每天单元格的 0..n 个事件上总计一个扩展 Prop

据我了解，我们可以利用日间单元渲染 Hook (例如日间单元内容 Hook )以及其他 Hook 来实现此目的。日期单元内容 Hook 看起来非常有前途，但是当事件并非全部在内存中并且而是异步加载时，它就无法工作，因为日期单元在数据返回之前呈现。我找不到一个好的方法来解决这个问题，也许在返回数据时重新渲染整个日历。

下面是一些示例代码，在事件位于内存中的情况下执行一些逻辑，不适用于异步事件(VueJS，但对于 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

}

大声思考，感觉将日期事件作为日期单元渲染 Hook 参数的一部分是很直观的，但我知道它们是相互解耦的。

问题:如何汇总给定日期/日期的多个事件的值？

Answer 1

虽然有点困惑，但以下是我最终实现这一目标的方法。请注意，使用日单元格渲染 Hook (我相信是dayCellContent)，我首先通过injectCellContent 函数向DOM 添加了一个容器。 addEmployeeCounts 在通过回调成功重新获取源事件时调用。如果调整或移动一天的大小，则需要 native 事件的条件来重新呈现计数，再次通过完整日历选项使用回调。

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