| Issue 550: | Drop event outside of calendar / between calendars | |
| 50 people starred this issue and may be notified of changes. | Back to list |
Hi, I would like to drag the events from the calendar back to the Draggable Events list. I couldn't find anywhere on how to do that. Is it possible you add this enhancement? Thanks. Shen.
Aug 25, 2010
Project Member
#1
adamrs...@gmail.com
Oct 7, 2010
you could probably just use jQuery UI droppable (http://jqueryui.com/demos/droppable/), however, i know fullcalendar would have some issues with it (particularly css-related: wont let event out of container), so i'd have to quality-ensure it
Summary:
Drop event somewhere outside of the calendar
Status: Accepted
Dec 31, 2010
Issue 771 has been merged into this issue.
Dec 31, 2010
this should also work for dragging & dropping from one calendar to another
Feb 10, 2011
An example on how to set up the droppable function in fullcalendar would be highly appreciated .....
Feb 13, 2011
Issue 816 has been merged into this issue.
Mar 23, 2011
Hi Adam, I've written a jQuery plugin that builds on FullCalendar to display multiple 1-day agenda calendars side-by-side, and the ability to drag events between calendars is last piece of functionality I need to get working before open-sourcing it. I'm happy to help implement this change, but I could use some pointers, as I'm not really sure what's involved. I learned a tremendous amount about Javascript by reading your code, by the way. Thanks for that! Cheers, Clay
Mar 24, 2011
Could you share the plugin please?
Mar 24, 2011
Issue 841 has been merged into this issue.
Mar 24, 2011
(No comment was entered for this change.)
Summary:
Drop event outside of calendar / between calendars
Apr 11, 2011
I've modified the external-dragging to allow for dragging off of and then back onto month view. Have not tested with other views. The main problem was identifying id of the event dragged in the drop zone. I eventually resorted to a hack of caching the event data object at the start of the drag using the dragStart trigger. I had hopped to use ui.draggable.data() (or something). Full Calendar seems to cache events and elements in arrays but does not give any access to these structures. All the data seems locked in the closers. Notice I used jquery.ui.droppable rather than FullCalendar's dragStop I hope this helps those who have been struggling with this issue.
Apr 15, 2011
I have been playing around with Randy@allfives.net code for quite a while now, but I still haven't found a decent way to to move an event from one calendar to another. I think the problem lies in transforming the event element in calendar1 to an "acceptable" element that calendar2's drop() trigger/method accepts. Ofcourse one could make a dirty cheesy hack and just add the event from calendar1 to calendar2 by running the calendar2.renderEvent() method in calendar1s eventDragStop() callback. But then you need to do some nasty cursor position calculations to do, to add it to the right date in calendar2. I am actually surprised that the calendar doesnt accept an calendar event from another calendar, since the element should easily be recoqnized. So this is pretty much bump to se that implemented. Other than that fullcalendar is awesome.
May 11, 2011
I'd be nice if this were added to core, like a selector to specify the container. in jQuery UI draggable opts: http://jqueryui.com/demos/draggable/#option-containment var opts = { containment: '#some-container' }
May 11, 2011
Just saw this was marked as "Accepted". Super excited :) Thanks for all your hard work Adam.
May 13, 2011
Hi, Thanks for the wonderful plugin Can you provide the fcdraggable source file for the external-events? you deleted the one which was uploaded on github. Thanks...
May 30, 2011
Issue 950 has been merged into this issue.
Jun 26, 2011
I applied a 'very dirty' fix allowing me to drag between calendars
---------------------------
...
eventRender: function(event, element) {
//prepare the data for dropping as external item
element.data('eventObject', event);
},
eventAfterRender: function(event, element)
{
$(".fc-widget-content").droppable({
drop: function(event, ui) {
// retrieve the dropped element's stored Event Object
var originalEventObject = ui.draggable.data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
...
---------------------------
this allows me to treat the other calendar as a droppable area (not really a calendar object)
currently I do have to reload the data after dropping an element in it
but it is getting the job done
only issue now is : need to get the date of where I am dropping the event in the other calendar (need to get the data linked to $(".fc-widget-content") where I am dropping it
if any one has an idea ?
hope my dirty solution can help others while waiting for the official integration
Jul 18, 2011
+1 on this... Enabling moving events between calendars will make it possible to build great plugins based on fullcalendar.
Aug 5, 2011
Ok, I have this working with a very minor change to fullcalendar.js:
Line 4130:
if (cell == null || (dayDelta || minuteDelta || allDay)) {
// changed!
eventDrop(this, event, dayDelta, allDay ? 0 : minuteDelta, allDay, ev, ui, cell);
}else{
This passes cell through to the user code; if it is not null then it is a regular drag within the calendar. If it is null, then the event has been pulled off of the calendar, possibly onto another calendar otherwise to be discarded after confirming.
In my user code for the null case I use the ev.clientX object element to find which calendar the event should be rendered into. I'm storing the current calendar id in the event object, and I'm using that to find to which calendar I should apply removeEvents.
I'd post the full code, but I'm updating the calendars indirectly from publish-subscribe events on the server, so it's all a bit of a kerfuffle really.
An enhancement I'd like now is to get that nice landing position highlighting on the recipient calendar that you get when dragging in an external event.
Aug 29, 2011
Hi Adam, Is there a ballpark ETA for this feature? Thanks, -Yoni
Oct 12, 2011
Would be nice to get this working, this seems like best Open Source choice so far. I reckon moving between two calendars would help to create gant / resource -views. For my opinion it just moving events between resources (calendars). What I tried was just generate calendars for all resources and hack a little bit of skeleton to make it look nicer. Just couldnt find easy way to detect target calendar and its grid for counting dayDelta.. Oh well, this deffinetly should be doable.
Dec 19, 2011
I tried every solution posted here, but I still can't get an event "move out" from a day-view calendar (week and month works). Sadly this feature would have the most sense, in day-view, when you can move events -for example- from one room to another. Of course I could just create an html element resambling an event and move it around with draggable, but there is no way to disable the original draggable when I activate the new one.
Jan 4, 2012
I also made a small change to make this work. I wanted to remove items from the calendar by dragging it out of the calendar.
At line 2679 (in draggableDayEvent) I added a variable,
var inCalendar;
I then put at the (new) line 2698, to set that the event is still within the calendar when dragging,
inCalendar = true;
and at (new) line 2702,
inCalendar = false;
Finally, I changed (new) line 2710 to
if (dayDelta || !inCalendar) {
to ensure that eventDrop is called if it was dragged out (but not if it didn't move at all). I then checked to see if the second variable is 0 in the eventDrop callback function to see if it was dropped to a different day, or removed from the calendar.
Jan 4, 2012
Just to pull it all together, I have pulled out (most) of my system-specific changes to leave just the changes required to implement this feature. Some of the changes in fullcalendar.js are to promote the draggable event to a child of the "body" element rather than the calendar itself. This allows the event to be dragged out of the calendar; dragging out of all of the calendars gives you the option to delete the event, as russl describes.
Jan 9, 2013
Hello geekb...@gmail.com, I've the same requirement. Could you please help with it? If you can provide the working code sample, it would be a great help. Thank you, Main Pal
Feb 21, 2013
I also need this functionality for my project. I have the actual dragging and dropping working correctly, but for some reason the events insist on hiding behind the rest of the (non-calendar) UI. I've tried changing the draggable's containment, the z-index, and using a clone instead of the element itself as the helper, but no luck. I'm guessing this might be a result of the "css-related issues" Adam mentions. I'm sure there's a fix for this but I'm not sure what it is. Anyone know?
Mar 26, 2013
I have same requirement. Anyone have a working version that they can share
Jun 27, 2013
Was this issue fixed ? I would like drag the event off of the calendar for deleting , is that possible now ?
Jun 27, 2013
I have done this in two different systems now (Day View and Week View), unfortunately FullCalendar doesn't let you do this in a particularly clean way, at least I wasn't able to do so in these particular systems - a lot of application code gets mixed into the event handler functions, which makes it difficult to give you a "How To" example without investing a lot of time making a generic system. I think a new Calendar plugin is required that understands the concept of multiple resource views managed through one calendar.
Jun 28, 2013
THanks Geekb for your answer :) I understand that (i'm French) the actual version doesn't support this possibility (or maybe never). So, I'm searching an other way to drag and drop the event for deleting. I don't use the AllDay option, so I would like to turn it into a 'trash row'. Do you think that it's possible to do? to drag the event into the 'AllDay row' on the top to allow it to be deleted ? I'd just begun to use fullCalendar and I 'm not expert in Javascript. Thanks for your Help. Ben.
Jun 28, 2013
Hi Ben,
If you can get the offset, width & height of the 'allday' row, then you can detect that an event has been dropped on to it, and call $('#calendar').fullCalendar('removeEvents',event.id).
In my example code (Jan 4th 2012), I'm detecting an event being dragged off of all of the calendars, but it may be a better user experience to drag it to a 'trash can' area as you suggest.
The second time I implemented this, I created a function to detect which calendar the event had been dropped on, if none, then I give the option to remove or revert the event.
Peter
Aug 13, 2013
(No comment was entered for this change.)
Labels:
-Type-Enhancement Type-Feature
Aug 15, 2013
Issue 1380 has been merged into this issue.
Aug 15, 2013
Issue 1380 points out that fullCalendar should have each day set up as a jqui "droppable", which should accept drags from anywhere
Dec 3, 2013
Hi. At the end... it is possible to drag and drop events between calendars? Is there any online demo showing the functionality? Thks!
Apr 16, 2014
I do the demo that can drag and drop events between calendars.Just use my changed fullcalendar.js .But not perfect.
May 5, 2014
I had same problem, and thank you, leijun.m...@itbconsult.com. I fixed several functionality on your program. - Non all day events - Start/End time - Long term events - URL - Deleting original event I don't use repeating events. So it is not resolved. Yay, now I can develop the program I need! But this is not perfect.
May 14, 2014
Hi guys Those demo only work in view "basicDay" I need to get this work with the "agendaDay". How kan I do this?
May 15, 2014
>juan.chu...@gmail.com At this point, only the answer is "you can extend the demo program." When I need it and have time, I want to try it also, but not now for me.
Jun 7, 2014
Issue 2071 has been merged into this issue.
Jun 17, 2014
Do we have this functionality in V2 of fullCalendar ? Please help me with some pointers.
Jun 17, 2014
>sdd.sdei What pointers do you want to do?
Jun 19, 2014
@leijum i just want some information regarding where to update the core file for this functionality.
Jun 23, 2014
@sdd.sdei I have added comment in the file,just search leijun.
Jul 3, 2014
why do all the events disappear from the calendar when I drag them to another one?
Nov 19, 2014
Hello friends, The solution is here: https://stackoverflow.com/questions/3470154/remove-elements-from-fullcalendar-by-dragging-to-trash-can example: https://dl.dropboxusercontent.com/u/33338943/fc/index.html
Nov 20, 2014
Hi Sergio I want to move events between Calendar, in daymode. I dont think this is what I looking for.. J
Dec 9, 2014
Hi everyone.. I've implemented the solution using the same solution that Sergio posted here, but...I cannot change anything in css, js (probably the new version doesn't need those changes) but it doesn't work just the changing of css of the trash can. Anyone managed? Thanks
Feb 25, 2015
Hi everyone
I got an solution for the dragging problem by using the eventRender callback.
just make the element draggable on eventRender then you can drag it in any droppable element.
code>
eventRender: function(event, element) {
element.draggable();
},
Apr 15, 2015
is there a way to enable drag'n'drop functionality between two calendars in V2.3? Because of the removed jQuery-functionality I don't know how to implement that...
Aug 21, 2015
Discussion for this issue has moved to the following URL: https://github.com/fullcalendar/fullcalendar/issues/820 This is because Google Code is shutting down. Apologies if you are being pestered with these notifications. This is a one-time event. Happy coding, Adam
Status:
ExportedToGithub
|
|
| ► Sign in to add a comment |