无法将外部事件拖放到 FullCalendar dayGridView答案

【问题标题】：Unable to drag and drop external events into FullCalendar dayGridView无法将外部事件拖放到 FullCalendar dayGridView
【发布时间】：2020-05-29 19:47:13
【问题描述】：

我正在为一个非常奇怪的问题而发疯，我正在使用 PrimeNG FullCalendar 组件，这个：https://primefaces.org/primeng/showcase/#/fullcalendar

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

特别是我正在尝试实现一种行为，例如将可拖动事件移动到日历中的最后一个链接。

与链接示例不同，我的可拖动事件有一个开始和一个结束时间。例如，我想将一个 evet 拖到我日历的特定日期，指定它从 07:00 开始并在 15:00 结束（这是因为我的日历代表一个worki 轮班日历，将人员安排在特定的时间范围内）。

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

好的，正如您在 app-component 视图中看到的那样：

<div class="container">
  <div class="row">
    <div class="col-12">
      <app-header></app-header>
    </div>

    <div class="row">
      <div class="col-4">
        <p>DRAGGABLE</p>
        <app-people-list></app-people-list>
      </div>
      <div class="col-8">
        <app-fullcalendar></app-fullcalendar>
      </div>
    </div>
  </div>
</div>

左侧是<app-people-list> 组件，它显示了我可以拖动到我的日历中以进行特定工作班次的事件\人员列表。

在右侧我有 <app-fullcalendar> 组件呈现我的日历。

进入PeopleListComponent类（app-people-list组件的控制器）我有这个ngAfterViewInit方法：

ngAfterViewInit() {
  console.log("PEOPLE LIST ngAfterViewInit() START !!!")
  var self = this

  new Draggable(this.draggablePeopleExternalElement.nativeElement, {
    itemSelector: '.fc-event',
    eventData: function(eventEl) {
      console.log("DRAG !!!");
      console.log("SELECTED SHIFT: " + self.selectedShift.value);

      //var returnedEvent = self.createEventObject(self.selectedShift.value, eventEl.innerText);

      //return returnedEvent;

      var returnedEvent = {
        title: eventEl.innerText,
        startTime: "18:00",
        duration: {
          hours: 8
        }
      };

      return returnedEvent;
    }
  });

}

如您所见，它正在创建一个Draggable 对象，用于将我列表中的一个事件\人员拖到日历中。目前它正在返回一个像这样的对象：

var returnedEvent = {
  title: eventEl.innerText,
  startTime: "18:00",
  duration: { hours: 8 }
};

我把人\事件的标题放在哪里（它工作正常）。然后我把（现在它是静态的，然后我将它变成动态的）startTime 是事件的开始时间（例如：我将 person\event 拖到特定的一天，这意味着这个事件有在拖动事件当天的 18:00 开始）和 duration 表示事件在开始时间后 8 小时结束。

好的，在这种情况下，它似乎工作“很好”，事实上，当我将一个人\事件拖到它出现在日历中的特定日期时，这是一个屏幕截图：

例如，在上一个屏幕截图中，我将 PERSONA 2 事件拖到日期为 2017 年 2 月 22 日 的那一天，它就在这里（其他事件来自静态数组我的代码中定义的事件）

注意到的第一个奇怪的事情：我希望因此事件以指示开始时间的内容开始（至于设置为 2 月 9 日的事件，以 4p 开始，表示该事件从 16 开始：这一天的 00 点）。

好的，那么很奇怪的是：如果我将 returnedEvent 对象的 startTime 属性更改为小于 16:00 的值> 它不再起作用了！！！

例如，使用：

var returnedEvent = {
  title: eventEl.innerText,
  startTime: "16:00",
  duration: {hours: 8}
};

这意味着：活动从日历中所选日期的下午 4 点开始，并在同一天的 00:00 结束。当我将此事件拖到日历中时，该事件不会出现在日历上。没有渲染！！！之前 17:00 的所有 startTime 都会发生这种情况，我不明白为什么。进入 JavaScript 控制台，我没有收到任何错误消息。

为了完整起见，进入FullcalendarComponent 类（控制完整日历组件的类）我有：

@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.options = {
      plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
      defaultDate: '2017-02-01',
      header: {
        left: 'prev,next',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      editable: true,

      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("EXTERNAL EVENT LAND ON THE CALENDAR. Title: " + eventReceiveEvent.event.title + " Selected shift: " + eventReceiveEvent.selectedShift);
        //console.log("EXTERNAL EVENT LAND ON THE CALENDAR. Title: " + eventReceiveEvent.event.title + " Selected start: " + eventReceiveEvent.event.start);

        console.log(eventReceiveEvent);
        this.eventService.addEvent(eventReceiveEvent);
      }
    };

  }

}

你可以看到它包含这个方法：

eventReceive: (eventReceiveEvent) => {
  //console.log("EXTERNAL EVENT LAND ON THE CALENDAR. Title: " + eventReceiveEvent.event.title + " Selected shift: " + eventReceiveEvent.selectedShift);
  //console.log("EXTERNAL EVENT LAND ON THE CALENDAR. Title: " + eventReceiveEvent.event.title + " Selected start: " + eventReceiveEvent.event.start);

  console.log(eventReceiveEvent);
  this.eventService.addEvent(eventReceiveEvent);
}

接收人员列表组件发出的上一个事件并将此事件放入数组中（调用服务），它工作正常。

我真的不明白我的代码可能有什么问题，以及为什么使用 startTime 值

怎么了？我错过了什么？如何更改我的代码来解决这个问题？

【问题讨论】：

标签： angular fullcalendar primeng primeng-calendar

【解决方案1】：

将事件拖入dayGridMonth 视图时，FullCalendar 不尊重在原始事件定义中设置的allDay 值，而是始终设置allDay: true。这意味着，默认情况下，拖入 dayGridMonth 视图的事件被视为/假定为全天事件。

但是，当您创建设置了 startTime 和 duration 的定时事件时，该事件不再是全天事件。当您将此类事件拖到 dayGridMonth 视图中时，FullCalendar 不允许将该事件拖放到视图中。

您所描述的最奇怪的事情是，当您创建以下事件时；

var returnedEvent = {
  title: eventEl.innerText,
  startTime: "16:00",
  duration: {hours: 8}
};

此活动结束时间在今天之后，FullCalendar 将其视为全天活动。由于这是全天活动，因此可以将其放入全天时段。

但是，当您创建以下事件时；

var returnedEvent = {
  title: eventEl.innerText,
  startTime: "15:00",
  duration: {hours: 8}
};

此事件的结束时间是今天，FullCalendar 将此不是视为全天事件，而是定时事件。由于这不是全天活动，因此不允许将其放入全天时段。

您可以通过切换到 week 或 day 视图并尝试将事件放入顶部的 all-day 行来观察相同的行为。它不允许将定时事件放入该行，而允许将定时事件放入任何其他行。

因此；您需要一种方法来解决 FullCalendar 以允许将定时事件放入 all-day 插槽。就像说的那样简单:) 在 FullCalendar 解析事件之后，将全天事件转换为定时事件就足够了。这可以在eventReceive 回调中完成。

eventReceive: receivedEvent => {
  receivedEvent.event.setAllDay(false, {maintainDuration: true})
}

长话短说，在您的FullcalendarComponent;

eventReceive: (eventReceiveEvent) => {
  //console.log("EXTERNAL EVENT LAND ON THE CALENDAR. Title: " + eventReceiveEvent.event.title + " Selected shift: " + eventReceiveEvent.selectedShift);
  //console.log("EXTERNAL EVENT LAND ON THE CALENDAR. Title: " + eventReceiveEvent.event.title + " Selected start: " + eventReceiveEvent.event.start);

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

但请注意，这会影响所有拖动的事件。因此，您可能希望根据初始事件创建期间定义的某些标志确定的条件将 all-day 设置为 false。这在很大程度上取决于您的用例。

希望对你有帮助，祝你好运。

【讨论】：

看来你解决了我的噩梦......现在完全清楚了！感谢您提供这些宝贵的信息