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

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

Fullcalendar External Draggable Change Event Data Dynamically

javascript

fullcalendar

fullcalendar-4