Javascript Fullcalendar - copying events

Question

I'm using Fullcalendar (http://arshaw.com/fullcalendar) in my project. It gets events via json source.

I want to give the user option to copy one event on the calendar to other day - and I'd like to use dragging for that (well, that's the client's requirement).

But dragging seems like moving an event, not copying - is there any way to get the "copy" of an event being dragged (or copy stay in original place), so it looks like a copy operation?

I tried to copy event object in eventDragStart callback, but it didn't work.

IMO the last comment in this thread can give you a starting point http://code.google.com/p/fullcalendar/issues/detail?id=105 — Rohith Nair, Apr 24 '12 at 21:11
If you somehow achieve this. You will loose the drag functionality. Is that acceptable for you? — Adil Malik, Apr 25 '12 at 21:50

score 7 · Answer 1 · answered Jul 19 '15 at 14:21

Below is my solution that allows the user to hold shift key to copy events. Note that this is actually moving the original event and leaving a copy in the original position.

I started with this reference and created the following:

//Before the fullCalendar object

    var copyKey = false;
    $(document).keydown(function (e) {
        copyKey = e.shiftKey;
    }).keyup(function () {
        copyKey = false;
    });

//then inside the fullCalendar object

    eventDragStart: function (event, jsEvent, ui, view) {
        if (!copyKey) return;
        var eClone = {
            title: event.title,
            start: event.start,
            end: event.end
        };
        $('#calendar').fullCalendar('renderEvent', eClone);
    },

would LOVE to see a fiddle of this – HPWD Jan 30 '18 at 02:13 — HPWD, Jan 30 '18 at 02:13
How shall we do it in Fullcalender v5. – Maya Nov 05 '20 at 00:25 — Maya, Nov 05 '20 at 00:25

score 2 · Answer 2 · answered Apr 26 '12 at 13:47

Try this:

eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
    // Create an event object and copy at least the start date and the title from event
     var eventClone = {
         title:event.title,
         start: event.start,
         end: event.end
     };

     // Render new event with new event object
     $('#calendar').fullCalendar('renderEvent', eventClone);

     // Revert the changes in parent event. To move it back to original position
     revertFunc();
}

This is just the idea. I haven't tested this code. Please let me know how it works. Thanks

You might have to use the [clone method](http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-clone-a-javascript-object) to create deep copies of start and end dates. But do not clone the entire event object. Because it contain _id (the id assigned by fullCalendar to each event) that might cause problems. — Adil Malik, Apr 26 '12 at 13:51

Ally Murray · Answer 3 · 2018-07-14T23:19:58.547

I realise this is an old question however I found it through a search engine so the solution I ended up with could be useful to others.

I took a slightly different approach and used jQuery UI Draggable, the same way external events are set up.

An event is copied when the user drags an event with the ctrl key held down, this leaves the original event in place and creates a new event where the jQuery draggable is dropped.

  // used to track whether the user is holding the control key
  let ctrlIsPressed = false;

  function setEventsCopyable(isCopyable) {
    ctrlIsPressed = !ctrlIsPressed;
    $("#calendar").fullCalendar("option", "eventStartEditable", !isCopyable);
    $(".fc-event").draggable("option", "disabled", !isCopyable);
  }

  // set events copyable if the user is holding the control key
  $(document).keydown(function(e) {
    if (e.ctrlKey && !ctrlIsPressed) {
      setEventsCopyable(true);
    }
  });

  // if control has been released stop events being copyable
  $(document).keyup(function(e) {
    if (ctrlIsPressed) {
      setEventsCopyable(false);
    }
  });

  $("#calendar").fullCalendar({
    defaultView: "basicWeek",
    events: [
      {
        title: "Event 1",
        start: moment(),
        end: moment().add(1, "d")
      },
      {
        title: "Event 2",
        start: moment().add(1, "d"),
        end: moment().add(2, "d")
      }
    ],
    editable: true,
    droppable: true,
    eventAfterAllRender(event, element, view) {
      // make all events draggable but disable dragging
      $(".fc-event").each(function() {
        const $event = $(this);

        // store data so the calendar knows to render an event upon drop
        const event = $event.data("fcSeg").footprint.eventDef;
        $event.data("event", event);

        // make the event draggable using jQuery UI
        $event.draggable({
          disabled: true,
          helper: "clone",
          revert: true,
          revertDuration: 0,
          zIndex: 999,
          stop(event, ui) {
            // when dragging of a copied event stops we must set them
            // copyable again if the control key is still held down
            if (ctrlIsPressed) {
              setEventsCopyable(true);
            }
          }
        });
      });
    }
  });

Working Codepen.

How shall we do this in latest Fullcalender V5? – Maya Nov 05 '20 at 00:20 — Maya, Nov 05 '20 at 00:20
Is that possible in pure javascript? – Radek May 06 '21 at 15:53 — Radek, May 06 '21 at 15:53

score 1 · Answer 4 · answered Jul 04 '18 at 17:46

I managed to get around this with help of above answers :

eventDrop: function (event, delta, revertFunc) {  
                if (copyKey) {
                    var eClone = {
                        title: event.title,
                        start: event.start,
                        end: event.end,
                        id: createGuid(),
                        playlistId: event.playlistId,
                        volume: event.volume,
                        backgroundColor: event.backgroundColor,
                        allDay: false
                    }; 
                    $('#calendar').fullCalendar('renderEvent', eClone, true);

                    revertFunc();
                } 
            },

Is that possible in pure javascript? – Radek May 06 '21 at 15:53 — Radek, May 06 '21 at 15:53

score 0 · Answer 5 · edited Feb 04 '20 at 07:35

0

I know this is an old question, but the results I've found through my search may be useful for others

I don't know if it's possible to fix your source.

within fullcalendar.js of dragListener In the dragStart function, we see that view.hideEventsWithId(seg.footprint.eventDef.id) is a function that removes the original.

Comment it out and it will work as you want.

edited Feb 04 '20 at 07:35

snieguu

2,073
2
20
39

answered Feb 04 '20 at 06:13

chan lee

1

Javascript Fullcalendar - copying events

5 Answers5

Linked