Question

I am stuck here and need some serious help. I had to do some work using fullcalendar, I have done everything following the standard procedure. The calendar displays all the events on the correct slots which works fine. Some events needs to be rendered but remain hidden and wait for an event to be shown, so what I did here was only to set the css display attribute to none when hidden and block when visible. So far, everything works perfectly, the problem comes when dragging and event from slot A to slot B, for some odd reason when the drag event starts, the event box should be near the cursor, but it isn’t, the event box is set around 200px below and 100px to the right from the cursor.

I have done some debugging and found that, even though the event box top and left attributes are set correctly (lets say top:300px, left:150px), when the drag event starts, the left value goes to 0px and top goes like 580px. I do not understand why is this happening, what am I doing wrong, or if there is something I should be doing

Answer 1

The problem is that FullCalendar uses the jQuery UI’s Position utility to figure out where the events are rendered, and most browsers do a poor job of specifying the top/left on hidden elements. So when you make the events visible, jQuery has no real idea where they are anymore and ends up doing the crazy stuff you see.

Easiest solution: don’t use CSS to show/hide your events. Use the FullCalendar API to create the event once it should be shown. renderEvent is the thing you want:

$('#mycalendar').fullCalendar( 'renderEvent', event [, stick ] )

Alternative possibility: additionally specify top: 0px; left: 0px in your CSS that also sets display: none;. Sometimes that tricks Position into working correctly.