如何同时获取 drag-drop title、start、end 和 resourceId？

Question

我正在尝试从 drag-and-drop 中成功收集所有事件数据。通过利用 eventReceive，我在这方面取得了部分成功。它设法获取了 title、start 和 end 但没有获取 resourceID.

显然 eventReceive（随后 'Event Object'）只允许 title、start 和 end 但不允许 resourceID导致了这个问题。

我注意到 drop: 正上方的部分正在抓取 console.logging resourceId 使用 arg.resource.id。

所以我的问题是如何将两者结合起来，并输出所有 title、start、end 和 resourceID。任何帮助将不胜感激。

drop: function(arg) {
  console.log('drop date: ' + arg.dateStr)

  if (arg.resource) {
    console.log('drop resource: ' + arg.resource.id)
    const resourceID = arg.resource.id;
    console.log('TESTING: ' + resourceID);
  }

  if (document.getElementById('drop-remove').checked) {
    arg.draggedEl.parentNode.removeChild(arg.draggedEl);
  }
},

eventReceive: function(arg) { // called when a proper external event is dropped
  console.log('eventReceive', arg.event);
  const eventData = {
    title: arg.event.title,
    resourceId: arg.event.resourceId,
    start: arg.event.start,
    end: arg.event.end,
  };
  console.log(eventData);

Answer 1

在 drop 回调中，资源 ID 是一般掉落信息的一部分，因为此时还没有日历事件。所以没有特别的资源信息可以从事件对象以类似的方式访问——这两件事是不相关的。

令人沮丧的是，event object documentation 实际上并没有指定如何从事件中读取关联的资源数据。出于某种原因，相关资源似乎不打算成为事件的 public 属性。

当 arg.event 登录到控制台时，通过检查其内部结构，我们可以看到 resourceId 属性实际上是 resourceIds 属性在 _def 属性中，这是一个资源 ID 数组 - 事件 can be associated with multiple resources.

所以您可以访问那个属性，但它实际上不应该是public，所以我们不应该依赖它。幸运的是，快速浏览一下 fullCalendar 文档就会发现事件对象有一个方便的 getResources 方法可以调用。

所以如果在 eventReceive 回调中你写：

const eventData = {
  title: arg.event.title,
  resourceIds: arg.event.getResources().map(function(resource) { return resource.id }),
  start: arg.event.start,
  end: arg.event.end,
};

这将检索事件分配给的 resourceIds 数组。当然，在刚刚将事件放到特定位置的日历上的情况下，实际上这个数组只会包含一个条目。

演示：https://codepen.io/ADyson82/pen/bGYQXLJ

如何同时获取 drag-drop title、start、end 和 resourceId？

How do I fetch drag-drop title, start, end and resourceId altogether?

javascript

fullcalendar

fullcalendar-scheduler

fullcalendar-5