How to set an id for the element in FullCalendar when drag and drop?

I have a drag and drop list but I am not sure how to set the id of the fullcalendar event when the user dropped the event in the zone...

I plan to use jQuery to send ajax requests to my backend and retrieve an id for the event but I am not sure how to update it into my fullcalendar object. Here is my example code:

var calendarEl = document.getElementById('calendar');  var calendar = new FullCalendar.Calendar(calendarEl, {      locale:'zh-cn',      events:[          {            id: 'a',            title: 'testing',            start: '2021-03-27'          }      ],    headerToolbar: {      left: 'prev,next today',      center: 'title',      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'    },    customButtons: {      add_event: {          text: 'Add',          click: function() {             alert();          }      }  },    {#eventLimit: true,#}    editable: true,    droppable: true, // this allows things to be dropped onto the calendar    drop: function(arg) {      // is the "remove after drop" checkbox checked?      if (document.getElementById('drop-remove').checked) {        // if so, remove the element from the "Draggable Events" list        arg.draggedEl.parentNode.removeChild(arg.draggedEl);      }    },      eventReceive: function( info ) {        //get the bits of data we want to send into a simple object        var eventData = {          id:info.event.id,          title: info.event.title,          start: info.event.start,          end: info.event.end,          description: info.event.description,        };        //send the data via an AJAX POST request, and log any response which comes from the server        $.ajax({            url: '/home/update_event/',            method: 'POST',          data: eventData,            success: (e)=>{                console.log(e)            }        })          fetch('/home/update_events/', {          method: 'POST',          {#headers: {'Accept': 'application/json'},#}          body: eventData,        }        )        .then(response => console.log(response))        .catch(error => console.log(error));      },      datesRender: function(info){          console.log(info)      },    eventClick: function(calEvent) {        console.log(calEvent)        var title = prompt('name:', calEvent.event.title, { buttons: { Ok: true, Cancel: false} });        if (title === 'x' || title === 'X'){            var event = calendar.getEventById(calEvent.event.id);            event.remove()        }        else{            if (title){            calEvent.event.title = title;              var event2 = calendar.getEventById('a');            event2.setProp('title', title);        }        }    }  });  calendar.render();  storeCalendar = calendar  $('#save').click(()=>{      console.log(calendar.getEvents())  })  

});

https://stackoverflow.com/questions/66827925/how-to-set-an-id-for-the-element-in-fullcalendar-when-drag-and-drop March 27, 2021 at 12:08PM