My favorites | Sign in
Project Home Issues
New issue   Search
  Advanced search   Search tips   Subscriptions
Issue 105: renderEvent to clone/copy
1 person starred this issue and may be notified of changes. Back to list
Status:  Done
Owner:  ----
Closed:  Sep 2009

Sign in to add a comment
Reported by, Sep 23, 2009
What steps will reproduce the problem?
1. create eventDrop 
2. copy CalEvent
3. call renderEvent

What is the expected output? What do you see instead?
new event created and old event restored

What version of the product are you using? On what operating system?
1.3 XP FF3.5

code snippet:

eventDrop: function(cal, dayDelta, minuteDelta, revertFunc, jsEvent, ui,
view) {

  var oldcal= cal
   oldcal.start.setDate(oldcal.start.getDate() - dayDelta);
   oldcal.end.setDate(oldcal.end.getDate() - dayDelta);'old'  // ???
  $('#calendar').fullCalendar('renderEvent', oldcal)

this seems to revert event back to current day.
Sep 24, 2009
Project Member #1
in your example, 'oldcal' is not a copy of 'cal', it is merely another reference. to 
due a true copy, here is what you'd do:

var oldcal = $.extend({}, cal);
oldcal.source = null; // hack to get renderEvent to work

anyways, this is more of a javascript issue than a fullcalendar issue

not sure if you are aware, but by the time eventDrop is fired, the calevent has already 
been modified, so your example (if it worked) would produce 2 events on the same day.

good luck
Status: Done
Jul 18, 2011
Hi Adam,

While the code above inserts the new event alongside the original, dragging either one moves the other to the new slot. They seem to be conjoined as a single event. I just need to copy an event and let the user move it elsewhere. I can't figure out how the new event is connected to the original.  Any help you can provide is appreciated.

Nice job, btw.

From fullCalendar options:
    eventMouseover: function(event, jsEvent, view) {
      $.calendar.currentEvent = event;

Copying Code:
  $('#meal-copy').click(function(event, value) {
    $.fn.copyEvent(event, value, $.calendar.currentEvent);

$.fn.copyEvent = function(event, value, obj) {
  var selectedIndex = parseInt(obj._id.replace(/_fc/,'')-1); // I've appended id's to the event DOM objects to reference them
  var newEvent = $.extend({}, $("#calendar").fullCalendar("clientEvents")[ selectedIndex ] );
  newEvent.source = null;
  newEvent._id = "_fc" + parseInt($("#calendar").fullCalendar("clientEvents").length+1);
  newEvent.title = newEvent.title + " copy";
  $("#calendar").fullCalendar("renderEvent", newEvent);

Your help is appreciated.
Jul 18, 2011
Alright, figured it out.  The code above doesn't created a new date object and therefor moving one moves the original.  Just needed new Date() for the start.
Jul 19, 2011
Project Member #4
glad you figured it out
Aug 11, 2011
Any chance of getting a working code sample for this?  I am working on a shift+click+drag approach that will detect the shift key being held down and when released create a copy of the original on the new day.

Here are my bits:

//little technique to detect Shift key
var shift = function () {
    shifted = false;
    shift.reset = function () {
        this.shifted = false;

$(document).keydown(function (e) {
    if (e.keyCode == 16) {
        shift.shifted = true;
    } else {
        shift.shifted = false;

//...snippet from calendar configuration
        eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
            if (shift.shifted) {
            } else {

It's the copyCalendarEvent() that I need help with.  I like using the built-in revertFunc() to snap the original back to it's starting place.  But, I want to take that event and make a copy and render it to the date the person was hovering over that I'm having trouble with.
Aug 12, 2011
Project Member #7
You can use to create a new event. Keep in mind that you have to sync it somehow with your event source.
Aug 13, 2011
So, yeah...renderEvent.  Still isn't behaving as I expect.  Here is what I'm trying:

eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
            if (shift.shifted) {
                var newEvent = $.extend({}, event);
                //change the ID of the copied event
                newEvent._id = increment;
                //render the copied event to the calendar
                $("#calendar").fullCalendar('renderEvent', newEvent)
                //increment my global id counter for future copies
                increment = increment + 1;
                //snap the original event back to its origin.

With the above code, a copy is created but never rendered to the calendar.  Instead, the original is snapped back to its starting place and the copy never happens (at least, it appears that way - I tried firing the rerenderEvents event after revertFunc() and nothing seemed to change).  As for synching the data, that's not a problem.  I have an ajax call handling those details.
Aug 13, 2011
OK.  Got everything working.  Here is how I use the shift key to allow an event to copy:

//first - set up a page-wide listener for the key event and set a "shifted" status
$(document).keydown(function (e) {
    if (e.keyCode == 16) {
        shift.shifted = true;
    } else {
        shift.shifted = false;
}).keyup(function (e) {
    shift.shifted = false;

//in the calendar configuration:
        eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
            if (shift.shifted) {
                //do a "deep" copy of the original event
                //WITHOUT "true" in the $.extend method this WONT WORK
                var eventCopy = $.extend(true, {}, event)
                //change the _id parameter to my global increment variable
                eventCopy._id = "fc_" + increment;
                increment = increment + 1;

                //set the start and date to the start date of the dropped event
                //for whatever reason, if you don't set the ._start and .start, this
                //doesn't work
                eventCopy._start = event._start;
                eventCopy.start = event._start;

                eventCopy._end = event._end;
                eventCopy.end = event._end;

                //i then send the new event off to a function that does my ajax work to update the db

                //render the copy to the calendar
                $("#calendar").fullCalendar('renderEvent', eventCopy)

                //snap the original event back to the starting point


Sign in to add a comment

Powered by Google Project Hosting