给定一天的所有事件的总特定属性 - 全球

Question

每天的每天都有一个扩展道具

需求：我知道 。日常的细胞内容挂钩看起来非常有前途，但是当事件不全部都在内存中并且相当不同步时，由于日托在返回数据之前呈现，因此无法正常工作。当返回数据时，我找不到一个很好的方法来解决此问题。

这是一些示例代码，可以在事件中进行内存，对异步事件（Vuejs，但对于香草来说应该相似），可以执行某些逻辑：

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

}

大声思考，几乎感觉就像是直观的。将天事件作为日常细胞渲染钩的论点的一部分，但我知道它们彼此脱钩。

问题：如何在给定的日期/日期中从多个事件中汇总值？

Answer 1

尽管有些混乱，但以下是我最终实现这一目标的方式。请注意，使用日常单元格式钩子（我相信DaycellContent），我首先通过注射插入式函数向DOM添加了一个容器。通过回调成功地进行了恢复的源事件，召集了Addemployeecounts。如果要调整或移动一天，则需要使用本机事件的条件来恢复计数，并通过FullCalendar选项再次使用回调。

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