Question

我正在处理全日历事件，当事件重叠时，需要在UI上一次基于某种条件显示一个确认框。

在此弹出窗口中执行的操作将决定是否与事件重叠。

问题是，即使拖动的事件悬停在另一个事件上，也会多次调用eventOverlap回调，从而产生大量调用。

有什么方法可以只获取一次静态事件和移动事件吗？

this.calenderOptions = {
  contentHeight: 300,
  plugins: [resourceTimelinePlugin, interaction],
  editable: true,
  header: {
    left: "prev,next",
    center: "title",
    right: "prev"
  },
  resources: this.resources,
  defaultView: "resourceTimelineDay",
  timeZone: "local",
  droppable: true,
  eventReceive: info => {
    const ref = this.dialogService.open(ConfirmationPopup, {
      header: "Confirm Action",
      width: "20%",
      contentStyle: { "max-height": "600px", overflow: "auto" }
    });
    ref.onClose.subscribe(data => {
      if (data === "no") {
        info.event.remove();
      } else if (data === "yes") {
        this.row_id = info.draggedEl.getAttribute("row-id");
        return true;
      } else {
        info.event.remove();
        return false;
      }
    });
  },
  eventOverlap: (stillEvent, movingEvent) => {
    // need to open a popover here only once.
    console.log("eventOverlap");
    return true
  },
  eventDrop : info => {
    if(info['newResource'] && info['oldResource']){
      if(info['newResource']['id'] != info['oldResource']['id']){
        info.revert();
      }
    }
    console.log("eventDrop")
  },
  eventClick : info => {
    console.log(info);
  },
  drop:info => {
    console.log("drop");
  },
  slotLabelFormat: {
    hour: "2-digit",
    minute: "2-digit",
    meridiem: false,
    hour12: false
  }
};

new ThirdPartyDraggable(gridEL, {
  itemSelector: ".ag-row",
  eventData: eventEl => {
    let rowId = eventEl.getAttribute("row-id");
    let data = this.commonService.grid_service.getRowNode(rowId);
    let color = null;
    if(data.data["status"] == 1){
      color = "#DEC181";
    }
    else if (data.data["status"] == 2){
      color = "#A56124";
    }
    else {
      color = "#000000";
    }
    return {
      title: data.data["shipmentId"],
      duration: data.data["est"],
      color : color,
      className: "test",
      extendedProps: [
        {
          est: data.data["est"],
          shipmentId: data.data["shipmentId"]
        }
      ]
    };
  }
});

this.calendar = new Calendar(
  this.calenderComponent.element.nativeElement,
  this.calenderOptions
);

this.calendar.render();

Answer 1

我遇到了一个类似的问题，其中一个项目正在进行中。

就我而言，我必须检查事件（由用户使用日期选择器组件插入）在日历中是否重叠。因此，我的想法是绕过eventOverlap处理程序，并使用eventDrop处理程序来调用一个函数，该函数检查新事件是否重叠。

我在本例中使用的功能是以下功能：

// dateStart and dateEnd have to be date strings in ISO format (ex. 1980-10-10)
function isOverlapping(dateStart, dateEnd) {
    var calendarEvents = $('#calendar').fullCalendar('clientEvents');

    dateStart.setHours(0, 0, 0, 0);
    dateEnd.setHours(0, 0, 0, 0);

    var eventStart;
    var eventEnd;

    for (i in calendarEvents) {
        if (calendarEvents[i].id != 1 && calendarEvents[i].type == undefined) {
            eventStart = new Date(calendarEvents[i].start._d);
            eventStart.setHours(0, 0, 0, 0);
            eventEnd = new Date(calendarEvents[i].end._d);
            eventEnd.setHours(0, 0, 0, 0);
            if (eventStart.getTime() < dateEnd.getTime() && eventEnd.getTime() > dateStart.getTime()) {
                return true;
            }
        }
    }
    return false;
}

使用此功能的结果，您可以检查事件是否与其他事件重叠，因此只有在事件重叠且只有一次时，才可以显示确认框。

对不起，我的英语不好，我希望我的回答会有用！

Fullcalendar：在重叠的情况下，如何在最终下降时一次获取静态事件和移动事件？

1 个答案: