为什么会出现这种奇怪的行为，试图将不同的颜色用于拖入PrimeNG FullCalendar组件的不同事件类型？

Question

bounty到期在2天内。该问题的答案有资格获得+ 500声望赏金。 AndreaNobili想要引起更多关注对此问题。

我正在使用PrimeNG Full Calendar组件在Angular应用程序上工作，这个是https://primefaces.org/primeng/showcase/#/fullcalendar

这是基于Angular FullCalendar组件，这个：https://fullcalendar.io/

在这里您可以找到我的完整代码：https://bitbucket.org/dgs_poste_team/soc_calendar/src/master/

我在尝试动态更改日历上呈现的事件的背景颜色时遇到了一些困难。根据不同的事件信息，我必须具有不同的事件背景颜色（例如，开始事件的时间：如果某个事件在07:00开始是绿色，如果它在15:00开始，那么它是红色，如果在23开始： 00，它是蓝色的，但此逻辑此时不重要）。

在我的项目中，我将外部事件拖到日历中，如下所示：https://fullcalendar.io/docs/external-dragging-demo

所以，正如您在我的BitBucket存储库中看到的那样，我使用这个FullcalendarComponent处理包含日历的组件，该日历从外部组件接收事件：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { EventService } from '../event.service';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin, { Draggable } from '@fullcalendar/interaction';
import { FullCalendar } from 'primeng';

@Component({
  selector: 'app-fullcalendar',
  templateUrl: './fullcalendar.component.html',
  styleUrls: ['./fullcalendar.component.css']
})
export class FullcalendarComponent implements OnInit {

  events: any[];
  options: any;
  header: any;

  //people: any[];

  @ViewChild('fullcalendar') fullcalendar: FullCalendar;

  constructor(private eventService: EventService) {}

  ngOnInit() {
    //this.eventService.getEvents().then(events => { this.events = events;});

    this.eventService.getEvents().subscribe(events => { this.events = events.map((event) => {
      var date = new Date(event.start);
      var hour = date.getHours();
      //event['backgroundColor'] = hour === 7? 'red': (hour === 7 ? 'green' : 'black');

      if(hour === 7) {
        event['backgroundColor'] = 'red';
      }
      else if(hour === 15) {
        event['backgroundColor'] = 'green';
      }
      else if(hour === 23) {
        event['backgroundColor'] = 'black';
      }

      return event;
    })});

    this.options = {
        plugins:[ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin ],
        defaultDate: '2017-02-01',
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        editable: true,
        nextDayThreshold: '09:00:00',
        allDayDefault: false,

        dateClick: (dateClickEvent) =>  {         // <-- add the callback here as one of the properties of `options`
          console.log("DATE CLICKED !!!");
        },

        eventClick: (eventClickEvent) => {
          console.log("EVENT CLICKED !!!");
        },

        eventDragStop: (eventDragStopEvent) => {
          console.log("EVENT DRAG STOP !!!");
        },

        eventReceive: (eventReceiveEvent) => {
          console.log(eventReceiveEvent);
          //eventReceiveEvent.event.setAllDay(false, {maintainDuration: true});
          this.eventService.addEvent(eventReceiveEvent);
        }
    };

  }

}

如您所见，该对象包含eventReceive（）方法，该方法侦听拖放事件。因此，我可以将对象从列表事件组件拖到该日历中。目前，我已经注释掉了这一行：

eventReceiveEvent.event.setAllDay(false, {maintainDuration: true});

为避免日历中的事件重复（我将在稍后进行解释）。因此，当将事件拖到我的日历中时，可以通过此服务方法将其插入事件数组：

addEvent(event) {
  const newEvent = {id: 5, title: event.event.title, start: event.event.start, end: event.event.end};
  this.events.push(newEvent);
  this.eventData.next([...this.events]);
}

其中eventData在我的服务类中被定义为BehaviorSubject，通过这种方式：

public eventData = new BehaviorSubject(this.events);

为了在日历上显示事件，我正在使用这种方法（而不是使用eventReceiveEvent.event.setAllDay（false，{maintainDuration：true}）;因为要在每次添加事件时自动进行颜色决定，所以我这样做：每当我通过服务的[[addEvent（）服务方法推送新事件->我在组件ngoninit中的订阅将接收更新的数据，并应用背景颜色以正确的颜色显示事件。

好吧，似乎很好地摘录了[[夜间用例（小时值等于23）。

这里是显示问题的打印屏幕：

1）我插入了一个

MORNING EVENT

（从07:00开始），我得到了这种正确的行为：

2）我插入了一个

AFTERNOON EVENT

（从15:00开始），我得到了这种正确的行为：

3）我现在插入一个

NIGHT EVENT

（从23:00开始），我得到了这种绝对奇怪的行为：

如您所见，问题是事件被复制，特别是：

• BLACK

后台事件已正确添加到

ngOnInit（）中定义的订阅函数中（这是正确的）。

BLUE

后台事件（不必添加）由以下方式添加：

eventReceive: (eventReceiveEvent) => {
  console.log(eventReceiveEvent);
  //eventReceiveEvent.event.setAllDay(false, {maintainDuration: true});
  this.eventService.addEvent(eventReceiveEvent);
}

而且我不明白为什么！在文章开头，我说我从** eventReceive（）方法中删除了这一行：

eventReceiveEvent.event.setAllDay(false, {maintainDuration: true});

这是因为，如果启用，则早上和下午的事件也将具有相同的复制行为。

是什么问题？我的代码有什么问题？我该如何解决？    

Answer 1

addEvent(event) {
    console.log(event.event.end);
    const newEvent = {id: 5, title: event.event.title, start: event.event.start, end: event.event.end};
    event.event.remove();
    this.events.push(newEvent);
    this.eventData.next([...this.events]);
  }

我添加了一个删除删除的事件的呼叫。从以下位置获取了删除方法的参考：-https://fullcalendar.io/docs/Event-remove

添加要显示的屏幕截图，它有效：-

问题的原因：-在这种情况下，有两个重复的事件，因为当您在任何时候开始，持续时间为2个小时时（从当前日期到下一个日期结束），并将其推入事件数组。在这种情况下，这两个事件变得不同。因为删除的一个具有与新创建的不同的属性。在其他情况下没有发生。
即使保留也可以解决上述问题后>
eventReceiveEvent.event.setAllDay(false, {maintainDuration: true});
由于没有注释，因此不会导致问题。因为每次我的代码都会删除删除的事件，并且因为我们将新事件推送到events数组，所以只会显示推送的事件。删除的一个将被删除。