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

Question

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())
})

});

Answer 1

eventReceive: function (event) {
    var title = event.event.title;
    var start = event.event.startStr;
    var backgroundColor = event.event.backgroundColor;
    var end = null;

    event.event.remove();

    calendar.addEvent({
      id:345(here you can put any id, including text),
      title: title,
      start: start,
      allDay: true,
      backgroundColor: backgroundColor,
      end: end
    });
  },