javascript - Fullcalendar 外部可拖动动态更改事件数据

Question

我正在使用全日历。

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

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

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

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

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

Answer 1

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

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

设置可拖动:

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 的事件数据相对简单。