Search code examples
javascriptfullcalendarfullcalendar-4

Fullcalendar External Draggable Change Event Data Dynamically

I am using fullcalendar.

I create an external draggable to drop onto the calendar

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

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

This works as expected. I then want to CHANGE the event data from Javascript so that the same draggable will now create a different event title.

If I create another draggable with the same name, the original event data and the new data appear side by side on the calendar. How to I either delete or modify the original event data?

Solution

  • To do this you can take advantage of the fact that as per the documentation the eventData property can accept a function, which will then be called dynamically each time the Draggable is dragged onto the calendar in order to fetch the event data.

    In this example I have set it to retrieve the innerText of the HTML element it's attached to, but for your purpose you could set it to retrieve item.name dynamically instead. I've then added a line of code which updates the innerText after the "drop" event, so that next time it's dragged it will use that new text as the event title. You may have some other trigger for changing the title though, it wasn't entirely clear from the question.

    Setting up the Draggable:

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

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

    And adding the code to update the element's text:

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

    Demo: https://codepen.io/ADyson82/pen/abbGaML?editors=1010

    Obviously this is simplistic since it only ever makes the change once, but hopefully you get the idea that it's relatively simple to set the event data for the Draggable dynamically using whatever means you choose.