How to copy the drag-and-dropped event?

Question

I update my app with the new version of fullcalendar and I would like to copy/paste the events I drag-and-drop.

I set the editable option to true in my planning object and the drag-and-drop does work, but I wish it would copy the event instead of deplacing it.

I am currently trying to edit the event eventDragStart in order to create a clone of my event.

var jsonEvents = <?php echo json_encode($arrayEvenements); ?>;
var planning = {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
    defaultView: 'timeGridWeek',
    allDaySlot: false,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    editable: true,
    events : jsonEvents,
    eventClick : function goTo(info){
      // Some link to my event page
    },
    eventDragStart : function cloneEvent(info) {
      // Where I want the magic to happen I guess ???
        var evenement = info.event;
        console.log(evenement);
    },
    eventDragStop : function upadateEvent(info) {
        var evenement = info.event;
        console.log(info)
    }
}

var calendarEl = $('#calendar1')[0]
var calendar = new FullCalendar.Calendar(calendarEl, planning)
calendar.render()

I want a clone of my drag-and-dropped event I have a single drag-and-dropped event I am moving around for no reason

Answer 1

For cloning an event I believe it's too late trying to do anything in eventDragStart, the event has already started moving at this point.

If you aren't bothered about events being dragged and resized and only want to clone the event when dragging, the solution is quite simple. Just treat each event as an external event. With this approach, editable should not be true.

let containerEl = document.getElementById("calendar");
let calendarEl = document.getElementById("calendar");

new Draggable(containerEl, {
  itemSelector: ".fc-event",
  eventData: function(eventEl) {
    return {
      title: eventEl.innerText
    };
  }
});

var calendar = new Calendar(calendarEl, {
  plugins: ["dayGrid", "interaction"],
  defaultView: "dayGridMonth",
  events: [
    {
      title: "Test 1",
      start: "2019-04-01"
    },
    {
      title: "Test 2",
      start: "2019-04-03",
      end: "2019-04-05"
    },
    {
      title: "Test 3",
      start: "2019-04-22",
      end: "2019-04-25"
    },
    {
      title: "Test 4",
      start: "2019-04-19"
    }
  ]
});

calendar.render();

Working example

If however, you do need to be able to drag and resize events you need some way of distinguishing between a regular drag and an external drag. In v3 I used to copy events when the control key was held down and the user started to drag. There appears to be a problem with this in v4, I plan to look into this further but in the meantime, I have a working example when holding the shift key.

If you drag without holding shift the event is moved, if you drag while holding shift the event is cloned.

let shiftIsPressed = false;

function setEventsCopyable(isCopyable) {
  shiftIsPressed = !shiftIsPressed;
  calendar.setOption("droppable", isCopyable);
  calendar.setOption("editable", !isCopyable);
}

document.addEventListener("keydown", event => {
  if (event.keyCode === 16 && !shiftIsPressed) {
    setEventsCopyable(true);
  }
});

document.addEventListener("keyup", event => {
  if (shiftIsPressed) {
    setEventsCopyable(false);
  }
});

let containerEl = document.getElementById("calendar");
let calendarEl = document.getElementById("calendar");

new Draggable(containerEl, {
  itemSelector: ".fc-event",
  eventData: function(eventEl) {
    return {
      title: eventEl.innerText
    };
  }
});

var calendar = new Calendar(calendarEl, {
  plugins: ["dayGrid", "interaction"],
  defaultView: "dayGridMonth",
  // Determines whether the events on the calendar can be modified.
  editable: true,
  // Determines if external draggable elements can be dropped onto the calendar.
  dropAccept(el) {
    return shiftIsPressed;
  },
  events: [
    {
      title: "Test 1",
      start: "2019-04-01"
    },
    {
      title: "Test 2",
      start: "2019-04-03",
      end: "2019-04-05"
    },
    {
      title: "Test 3",
      start: "2019-04-22",
      end: "2019-04-25"
    },
    {
      title: "Test 4",
      start: "2019-04-19"
    }
  ]
});

calendar.render();

Working example