Search code examples
javascriptcssdrag-and-dropfullcalendarfullcalendar-5

Fullcalendar: Draggable screws up styling

Im need to be able to drag drop external HTML elements into the fullcalendar. I looked at the following for directions:https://fullcalendar.io/docs/external-dragging

This works fine, I can drag drop elements into my calendar now. However, for some weird reason, initializing Elements with new Draggable() screws with the styling of the dragged ghost. Here is the view when not dragging: enter image description here

When the drag starts, this happens: enter image description here

Because this only happens while dragging, I dont even know how to look into this element and change its styling accordingly. I tried to find other ways without using new Draggable() but it seems as if this is the only way. I looked at the property dropAccept too, but this does not work either. Thanks in advance!

Solution

  • So the issue is that the moment the drag starts, the ghost detaches from its parent element. Therefore, all styles that change the childelement from the parent are lost and it leads to this behaviour. The solution is to encapsulate the element in another element(div) and make it so that there are no styles that influence the child element.