Issue 559: Allow event objects to be dragged outside of calendar view.
Status:  Duplicate
Merged:  issue 550
Owner: ----
Closed:  Aug 2010
Reported by StlDoug, Jul 15, 2010
I would like to incorporate a droppable trash can feature in my calendar, where the user could drag one of there event objects outside of the calendar window onto my trash can icon. That event could then handle the removeEvent, etc.

As it is now, you are not allowed to drag events outside the calendar view.
Jul 21, 2010
#1 StlDoug
Ok, so apparently all you have to do is change the CSS rule for ".fc-view". Question is, is anything bad going to happen if I remove the overflow rule (how does this affect other widgets... guess I'll find out.)

.fc-view { /* prevents dragging outside of widget */
   width: 100%;
   /*overflow: hidden;*/
}
Jul 30, 2010
#2 StlDoug
I have discovered a problem with removing the overflow rule. If you switch to agendaWeek or agendaDay view, then parts of the weeks render below the outside calendar border. I'm going to look into it to see if I can track down where this is being calculated.
overflow_render_error.jpg
43.8 KB   View   Download
Jul 31, 2010
#3 StlDoug
I found part of the problem. When you are calculating the height for "fc-agenda-bg", you are not taking in account the "top" offset. (In my case you are setting the "top" to 11, but you are not subtracting that value from the overall height, so it's hanging off the bottom by 11px.)

I'm still looking for where you are calculating this value, but at least I know how to fix it.

The other thing, I can get the month view events to drag outside the calendar, but so far I can't do the same with the agenda views.
Aug 12, 2010
#4 hzai...@gmail.com
Do you have the code for this StlDoug?  Dragging into the trash?
Aug 25, 2010
Project Member #5 adamrs...@gmail.com
thanks for the investigating StlDoug. i will tackling this if/when i do  issue 550 . merging...
Status: Duplicate
Mergedinto: 550
Aug 25, 2010
#6 StlDoug
@hzaidi3 All you need to do is setup a jQuery droppable item that accepts the event class. I can't remember the class name off the top of my head, but it wasn't that difficult. ".fc-event" maybe.

You will have to comment out or remove the overflow CSS rule like above and then you can drag the events outside of the calendar (On month view only). 

Hope this helps. 


Dec 29, 2010
#7 SHAISA.U...@gmail.com
Hi,
How did you identified the particular event that is being dragged outside of the calendar. Actually, I am also looking for the same functionality but did not get anything. Would you please post the snippet so that I could make use of it for reference?
Thanx.
Dec 31, 2010
#8 StlDoug
@SHAISA.UMAS

I no longer have the code I was using to do this. (It wasn't working like I needed it to, so I trashed the code... also, because I needed this to work with touch-devices, I decided to rethink how I was doing things)

Anyway, I identified the event by using a unique ID that I attached to each event. Once the item was dropped, I just read the id and then used that to do my thing. Hope that is what you were asking, if not let me know.

And again, to get the event, all you have to do is setup a simple "droppable" event that accepts the ".fc-event" class (I think that was the name), outside the calendar, remove the "overflow" rule from the CSS and then everything should work.