Fullcalendar внешнее перетаскиваемое изменение данных события динамически - PullRequest
Новая
       4

Fullcalendar внешнее перетаскиваемое изменение данных события динамически

1 голос
/ 07 ноября 2019

Я использую fullcalendar.

Я создаю внешний перетаскиваемый элемент для перетаскивания в календарь 

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

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

Это работает, как и ожидалось. Затем я хочу ИЗМЕНИТЬ данные события из Javascript, чтобы тот же перетаскиваемый объект теперь создавал другой заголовок события.

Если я создаю другой перетаскиваемый объект с тем же именем, исходные данные события и новые данные появляются рядом друг с другом. сторона в календаре. Как удалить или изменить исходные данные события?

enter image description here

1 Ответ

0 голосов
/ 07 ноября 2019

Для этого вы можете воспользоваться тем, что согласно документации свойство eventData может принимать функцию, которая будет вызываться динамически каждый раз, когда Draggable перетаскивается в календарь вдля извлечения данных о событии.

В этом примере я настроил его на получение innerText элемента HTML, к которому он присоединен, но для вашей цели вы можете настроить его на динамическое извлечение item.name. Затем я добавил строку кода, которая обновляет innerText после события «drop», чтобы в следующий раз при перетаскивании он использовал этот новый текст в качестве заголовка события. У вас может быть какой-то другой триггер для изменения заголовка, хотя это не совсем понятно из вопроса.

Настройка 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 динамически, используя любые средства, которые вы выберете.

...