Fullcalendar: Drop event outside of calendar / between calendars

[arshaw]

Originally reported on Google Code with ID 550

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.

Reported by sfu%[email protected] on 2010-07-08 20:44:57

Imported with 49 stars.

[arshaw]

Issue 829 has been merged into this issue.

Reported by adamrshaw on 2010-08-26 02:48:11

[arshaw]

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

Reported by adamrshaw on 2010-10-07 22:01:07

• Status changed: Accepted

[arshaw]

Issue 1040 has been merged into this issue.

Reported by adamrshaw on 2010-12-31 18:39:59

[arshaw]

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

Reported by adamrshaw on 2010-12-31 18:40:25

[arshaw]

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

Reported by SHAISA.UMAS on 2011-02-10 13:05:21

[arshaw]

Issue 1085 has been merged into this issue.

Reported by adamrshaw on 2011-02-14 02:13:24

[arshaw]

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

Reported by [email protected] on 2011-03-24 01:47:03

[arshaw]

Could you share the plugin please?

Reported by nic.bourgoin on 2011-03-24 22:37:35

[arshaw]

Issue 1110 has been merged into this issue.

Reported by adamrshaw on 2011-03-25 03:12:55

[arshaw]

Reported by adamrshaw on 2011-03-25 03:13:27

[arshaw]

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.  

Reported by [email protected] on 2011-04-12 00:53:13

---

• _Attachment: external-dragging.html_

[arshaw]

I have been playing around with [email protected] 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.

Reported by andre.okul on 2011-04-15 16:26:14

[arshaw]

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

Reported by jboesch26 on 2011-05-11 16:15:13

[arshaw]

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

Reported by jboesch26 on 2011-05-11 16:28:57

[arshaw]

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

Reported by samir11v on 2011-05-13 12:28:08

[arshaw]

Issue 1219 has been merged into this issue.

Reported by adamrshaw on 2011-05-31 02:42:58

[arshaw]

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

Reported by vendetta.ae on 2011-06-26 16:33:45

[arshaw]

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

Reported by jan.kaltoun on 2011-07-18 11:49:44

[arshaw]

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.

Reported by geekbrit on 2011-08-05 18:56:28

[arshaw]

Hi Adam,

Is there a ballpark ETA for this feature?

Thanks,
-Yoni

Reported by yonibaciu on 2011-08-29 18:26:46

[arshaw]

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.

Reported by koponen.tuomas on 2011-10-12 22:51:08

[arshaw]

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.

Reported by joe2night on 2011-12-19 16:10:23

[arshaw]

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.

Reported by russlevy on 2012-01-04 13:23:22

[arshaw]

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.

Reported by geekbrit on 2012-01-04 14:31:07

---

• _Attachment: fullcalendar_changes.txt_

[arshaw]

Hello [email protected],

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

Reported by [email protected] on 2013-01-09 10:21:11

[arshaw]

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?

Reported by [email protected] on 2013-02-22 02:10:40

[arshaw]

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

Reported by Kenmak82 on 2013-03-26 14:21:53

[arshaw]

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

Reported by benjamin.brigidi on 2013-06-27 14:20:20

[arshaw]

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.

Reported by geekbrit on 2013-06-27 14:31:21

[arshaw]

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.

Reported by benjamin.brigidi on 2013-06-28 09:37:45

[arshaw]

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

Reported by geekbrit on 2013-06-28 11:20:33

[arshaw]

Reported by adamrshaw on 2013-08-14 01:51:53

• Labels added: Type-Feature
• Labels removed: Type-Enhancement

[arshaw]

Issue 1380 has been merged into this issue.

Reported by adamrshaw on 2013-08-16 05:09:54

[arshaw]

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

Reported by adamrshaw on 2013-08-16 05:10:45

[arshaw]

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

Reported by menazzit on 2013-12-03 23:55:26

[arshaw]

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

Reported by [email protected] on 2014-04-16 08:36:29

---

• _Attachment: fullcalendar.js_
• _Attachment: demo.html_

[arshaw]

I had same problem, and thank you,  [email protected].

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.

Reported by hitotch on 2014-05-06 01:10:54

---

• _Attachment: demo.html_
• _Attachment: fullcalendar.js_

[arshaw]

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

Reported by juan.chulito on 2014-05-14 08:34:08

[arshaw]

>[email protected]

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.

Reported by hitotch on 2014-05-15 16:10:50

[arshaw]

Issue 2071 has been merged into this issue.

Reported by adamrshaw on 2014-06-07 20:25:47

[arshaw]

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

Reported by sdd.sdei on 2014-06-17 09:44:32

[arshaw]

>sdd.sdei
What pointers do you want to do?

Reported by [email protected] on 2014-06-18 06:57:35

[arshaw]

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

Reported by sdd.sdei on 2014-06-19 12:14:39

[arshaw]

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

Reported by [email protected] on 2014-06-24 02:27:04

---

• _Attachment: fullcalendar.js_

[arshaw]

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

Reported by dexter.geek.uk on 2014-07-03 14:47:59

[arshaw]

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

Reported by sergio.ferreira.filho on 2014-11-19 17:13:43

[arshaw]

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

J

Reported by juan.chulito on 2014-11-20 10:15:39

[arshaw]

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

Reported by rasonlee on 2014-12-09 13:42:52

[arshaw]

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

Reported by arendtchris on 2015-02-25 12:56:41

[arshaw]

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

Reported by andreas.schenk on 2015-04-15 19:09:29

[twiginteractive]

Hi - I'm trying to drag an item off from FC and onto an external jQ Sortable list. I have it working (by calling $el.draggable({}) on the event inside the eventRender method). However, the drag event is jerky (and the proxy doesn't always stick to the pointer as it should) - I'm thinking this is because FC2.4 no longer uses jQuery UI for its dragging - it must use a homegrown/elemental approach.

So when I apply the jQ draggable, it seems to mess up the draggable proxy. As said it does techinically work (the sortable can receive the drop) but I was wondering if there was a better way? Basically I just need to extend the native FC drag action to include a "connectToSortable" parameter so that the external sortable object can receive the drop.

Any help please? Thanks!

[MartijnWelker]

@arshaw Could you provide a status update on this ? Otherwise I'll try to help and look into the code.

[arshaw]

no progress on this, and probably won't be any progress this quarter

[MartijnWelker]

@arshaw, I've tried making my own implementation for this which kind-of works (a bit hacky), if you're interested I could give you my code.

[zachstronaut]

Pinging this. I would very much like to see the ability to drag from one calendar to another.

[Machecek]

Hi, i'm also looking forward for this feature, is there any progress?

@MartijnWelker can you share your implementation?

[kingofwhales]

this codepen by Subodh Ghulaxe seems to have provided a solution. https://codepen.io/subodhghulaxe/pen/myxyJg?editors=0011

[Machecek]

@kingofwhales a have already saw that, it looks nice, but actually it's working only in month view. Event drag ability is lost in week and day view ..

[kingofwhales]

@Machecek Do you think the guy updated it? I was trying it in codepen and I was actually able to drag events when both are weekly/daily calendar. I am thinking about incorporating this into my project so it's important that it actually works for all calendar type.

edit: Actually I tried for a few more times. Sometimes it works. Other times it doesn't.

[1anil21]

Hi, I'm waiting for this feature. There are many errors while I'm using making events draggable method (https://codepen.io/subodhghulaxe/pen/myxyJg) for custom view (2 days).

[letwork]

looking for Drag&Drop between two or more calendars.

My Goal:

• x fullcalendar-scheduler controls per page
• each control shows only one day, and x resources
• drag events from one day to another (aka from one control to the other)

[jviure]

When in day mode you try to move an event from one calendar to another, the event box drags under the calendar, and an underisable scroll is done..., here an screenshot!

http://picpaste.com/pics/Captura_de_pantalla_2017-09-05_16-42-52-z4g8ZQNj.1504622921.png

Thnks!

[Devnsyde]

+1

[blademarek]

+1

[tangothu]

Would like to see this feature become live. Could anyone share if there's a hacky implementation of allowing dragging/dropping events on the day view of full calendar?

When trying this with Vue Fullcalendar component (https://github.com/CroudTech/vue-fullcalendar) the events were hiding at the backgrounds also and cannot be taken away from original calendar. (See: https://ibb.co/gmCsoK)

[arshaw]

This issue has been addressed in the latest alpha release (4.0.0-alpha.2)
See the blog post »

Possible to drag between calendars now:
https://fullcalendar.io/docs/v4/other-calendar-dragging
https://fullcalendar.io/docs/v4/other-calendar-dragging-demo

but still no better API for dragging an event outside the calendar onto something else that's not a calendar.

[arshaw]

I'm closing this issue to signify that it's implemented (since v4-alpha2). I'll comment on this thread again when v4 is officially released.

[arshaw]

V4 was officially released a few days ago!

[nvacheishvili]

Hello Everyone - I have been having issues with the full calendar version 3.9.0.
Updating to version 4 for me would cause many other significant problems.
I have searched all stack overflow questions about this and it has been very hard to find an answer to this question that does not involve using jQuery Draggable for each event on the full calendar or removing overflow feature.
Removing overflow would remove the ability of any kind of scroll which was very significant for my project.

The view that I have been working with is agendaDay view.
I would like to share my solution for this with everyone who might be having a similar problem.

eventDragStart: function(){ $('.fc-view').css('position','static'); $('.fc-row.fc-widget-header').css('position','static'); }
eventDragStop: function(){ $('.fc-view').css('position','relative'); $('.fc-row.fc-widget-header').css('position','relative'); }
If this does not work for you - and you need scrolling and do not want to involve jquery draggable in this - I would suggest looking for each relatively positioned div in and after .fc-view class and setting them to 'static' to see when you would be able to get the overflown element out of bounds and still have it visible.

[empty-back]

Hello,Has the problem been solved?I want drag delete event with 3.10.0,How to do that?Thanks!

[erasmuswill]

Hey @arshaw
Is it possible to drag events to a third-party non-fullcalendar div? I'm currently using sortablejs and this would be a great feature

About to try #829 but that is probably only going to work for v3 and I'm using v4.

[gongAll]

Does not seem to make sense to close this issue, since only part of it was resolved. Maybe would be practical to open a new one with what's left to implement (Drop event outside of any calendar), to better understand the need of such functionality.

[em1le]

Hi there, i encountered that problematic recently. I had to drag events from fullcalendar (angular) to a side menu with 3 divs representing different action (remove, replacement and cancel).

The workaround uses dragstop event to catch event.jsEvent.clientX and event.jsEvent.clientY. From then, one could use document.elementFromPoint(x, y) to get the targeted element and element.closest('.some-class-or-#some-id) to retrieve the exact element one want.

export class MyComponent implements OnInit {

  @ViewChild('calendar') calendarComponent: FullCalendarComponent;
  calendarApi: Calendar;

  ...
  actionOnDragStop (e) {
    let x = e.jsEvent.clientX;
    let y = e.jsEvent.clientY;

    let element = document.elementFromPoint(x, y);
    let actionDivElement = element.closest('.action-div');

    if (element.id !== null) {
      if (element.id === 'removal') {
        let curEvent = this.calendarApi.getEventById(e.event.id);
        curEvent.remove();
      }  
    }
  }
  ...
}

This may be not suitable for every use cases and is not very solid triggered on dragstop instead of a proper drop.

I hope it can help.