How to add a external element date block of 3 days with drag n' drop with fullcalender

Question

I am using the http://arshaw.com/fullcalendar/ to create a simple calender with a drag and drop functionality, and I was hoping if anyone who has had experience using it can helping me out a bit with a question I'm having.

What I am trying to achieve is to create a draggable block that highlights a set of days instead of one day in the calender. My approch to solving this was to take the day I drop the block and count the next 3 days and set that as my end date.

        //create 3 day block
        var threeDayBlock= date;
        threeDayBlock.setDate(threeDayBlock.getDate() + 2);

Then add it to the calender as follows

        copiedEventObject.end = threeDayBlock;

What this does however is, once I drop it to a selected date it moves the event 3 days ahead instead. What I would like it to do instead is enter a three day block from the day I drop it to 3 days ahead.

Here is my code in jsfiddle http://jsfiddle.net/rayshinn/ZTWgD/3/

I really appreciate any help I can get to solving this matter! Thank you for reading.

Answer 1

What's happening is that you're creating a reference called threeDayBlock to the object date. Therefore, when you change threeDayBlock, you're changing date as well. All you need to do is copy the date object instead of referencing it:

var threeDayBlock = new Date(date.getTime());

That's it!

See it working here: http://jsfiddle.net/ryleyb/ZTWgD/4/

Also, to understand how Javascript deals with values being copied vs referenced, see here.