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

I had copy working on drag and drop in v3, I realise you are using v4 but this may give you a starting point: https://stackoverflow.com/a/51327702/3891834 I do plan to create an updated codepen on that answer with v4 but I haven't had time to do it yet. — Ally Murray, Mar 29 '19 at 15:01
@AllyMurray I do not get it. On your Codepen I see your code allows to drag and drop events, that's possible now with the lib there is no need to code it. I might have said it wrong but what I would like to is create a clone of the element I'm dragging around. Like the original event stay still and I'm moving a clone of it — Mowso, Apr 01 '19 at 08:34
Sorry, I should have said that if you hold ctrl in that CodePen when you drag an event it is a clone of the event that is dragged. However, it is using jQueryUI, which you won't be using. If you have a look through the code in the CodePen when the ctrl key is held down it makes a copy of the event and uses the same approach as external events. When I re-write this my plan was to use the same approach without jQery UI. If ctrl is held, clone the element and set it up as an external event that can be dropped on the calendar. https://fullcalendar.io/docs/external-dragging — Ally Murray, Apr 01 '19 at 08:59

score 2 · Answer 1 · answered Apr 02 '19 at 08:42

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

I think I found some bugs. Sometimes the original event just disapear and it does not copy paste events like I wish it would — Mowso, Apr 05 '19 at 12:25

How to copy the drag-and-dropped event?

1 Answers1