Fullcalendar 外部可拖动更改事件数据动态答案

【问题标题】：Fullcalendar External Draggable Change Event Data DynamicallyFullcalendar 外部可拖动更改事件数据动态
【发布时间】：2019-11-07 16:26:07
【问题描述】：

我正在使用全日历。

我创建了一个可拖放到日历上的外部可拖动对象

let singleslot = document.getElementById('singleslot');

 new Draggable(singleslot, {
  eventData: {
    title: item.name,
    duration: '00:45'
  }
});

这按预期工作。然后我想从 Javascript 更改事件数据，以便相同的可拖动对象现在创建不同的事件标题。

如果我创建另一个同名的可拖动对象，则原始事件数据和新数据并排显示在日历上。如何删除或修改原始事件数据？

【问题讨论】：

标签： javascript fullcalendar fullcalendar-4

【解决方案1】：

为此，您可以利用as per the documentation eventData 属性可以接受一个函数，然后每次将 Draggable 拖到日历上时都会动态调用该函数以获取事件数据。

在此示例中，我已将其设置为检索它所附加到的 HTML 元素的 innerText，但出于您的目的，您可以将其设置为动态检索 item.name。然后我添加了一行代码，在“drop”事件之后更新innerText，以便下次拖动它时，它将使用该新文本作为事件标题。不过，您可能还有其他一些更改标题的触发因素，但问题并不完全清楚。

设置 Draggable：

let singleslot = document.getElementById("singleslot");

new Draggable(singleslot, {
  eventData: function(eventEl) {
    return {
      title: eventEl.innerText,
      duration: "00:45"
    };
  }
});

并添加代码以更新元素的文本：

drop: function(info) {
  singleslot.innerText = "ABC";
}

演示：https://codepen.io/ADyson82/pen/abbGaML?editors=1010

显然这很简单，因为它只进行一次更改，但希望您明白使用您选择的任何方式动态设置 Draggable 的事件数据相对简单。

【讨论】：

非常感谢您花时间向我解释这一点。按预期工作。