How to reschedule event from one month to another using drag and drop

Question

I have an event on one calendar, and I need to offer the user the ability to move that event to another month in the same calendar. It seems like the best way to do this is (1) remove the event from the current calendar, (2) create a draggable div outside the calendar, (3) allow the user to change the month/day/year, (4) allow the user to drag the div back onto the calendar, (5) hide the new div, (6) submit an ajax request to update the datasource, (7) delete the newly dropped event.

Attached are the code snippets used to do this.

My question: this seems very roundabout. Is there a better way?

    // 1
    reschedulingEvent = calendar.getEventById(....)
    reschedulingEvent.remove()

    // 2
    rescheduledAppointment = new FullCalendar.Draggable(document.getElementById(
    'rescheduled-appointment'), {
      eventData: {
        id: reschedulingEvent.id,
        title: reschedulingEvent.title,
        duration: "0:" + (reschedulingEvent.end - reschedulingEvent.start)/1000/60,
      }
    })

  // 4
  calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    editable: true,
    droppable: true,
    eventDrop: addEventToForm,
    eventReceive: addEventToForm,
  });


async function addEventToForm(info) {
  if (!confirm("Would you like to reschedule this appointment")) return;
  $(".rescheduled-appointment-div").hide()   // 5
  await axios.post(`/appointments/${info.event.id}`, {
    start: info.event.start,
    end: info.event.end,
  })   // 6
  calendar.refetchEvents()
  calendar.getEventById(info.event.id).remove()  // 7