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.

Issue 559 has been merged into this issue.

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

Issue 771 has been merged into this issue.

this should also work for dragging & dropping from one calendar to another

An example on how to set up the droppable function in fullcalendar would be highly appreciated .....

Issue 816 has been merged into this issue.

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

Could you share the plugin please?

Issue 841 has been merged into this issue.

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.

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.

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' }

Just saw this was marked as "Accepted". Super excited :) Thanks for all your hard work Adam.

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...

Issue 950 has been merged into this issue.

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

+1 on this... Enabling moving events between calendars will make it possible to build great plugins based on fullcalendar.

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.

Hi Adam,

Is there a ballpark ETA for this feature?

Thanks, -Yoni

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.

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.

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.

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.

Comment deleted

Comment deleted

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

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?

I have same requirement. Anyone have a working version that they can share

Was this issue fixed ? I would like drag the event off of the calendar for deleting , is that possible now ?

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.

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.

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

Comment deleted

Issue 1380 has been merged into this issue.

Issue 1380 points out that fullCalendar should have each day set up as a jqui "droppable", which should accept drags from anywhere

Hi. At the end... it is possible to drag and drop events between calendars? Is there any online demo showing the functionality? Thks!

I do the demo that can drag and drop events between calendars.Just use my changed fullcalendar.js .But not perfect.

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.

Comment deleted

Hi guys Those demo only work in view "basicDay" I need to get this work with the "agendaDay". How kan I do this?

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.

Issue 2071 has been merged into this issue.

Do we have this functionality in V2 of fullCalendar ? Please help me with some pointers.

sdd.sdei What pointers do you want to do?

@leijum i just want some information regarding where to update the core file for this functionality.

Comment deleted

@sdd.sdei I have added comment in the file,just search leijun.

why do all the events disappear from the calendar when I drag them to another one?

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

Hi Sergio I want to move events between Calendar, in daymode. I dont think this is what I looking for..

J

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

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(); },

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...

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