Just add the bottom CSS property to your #external-events declaration. This specifies where the div must end. Otherwise it will fill the whole height of the entire page (even though that part of the page is not visible on the screen, and is not accessible due to the fixed position.)
Credit to some of the answers to this question for the idea.
P.S. Despite the title of the question, this is actually just a CSS issue and has nothing to do with fullCalendar really. The draggable event area is just a div. It is not part of, or generated by, the fullCalendar code, and is defined separately in the page.
Problem :
I’m developing the fullcalendar resource calendar with events being draggable and dropable. I’m fetching the draggable events area from the database for the users to be able to drag and drop them on the schedular.
The calendar is scrollable, but the draggable events area isn’t. The list of events is so long that it is getting cut off the page and hence is not visible completely.
I’m trying to make the draggable events area scrollable, either separately or with the calendar scroll itself. I have only posted the part of the code I feel is relevant. Please comment if you would like to see the JS code as well.
Comments
Comment posted by AAM
haha yes. But to explain about what and where I’ll be using it, I had to mention the fullcalendar. I had tried the overflow-y:scroll, that didn’t work. This worked. Thank you so much!!!:)
Comment posted by minimal, reproducible example
Actually in this case, the context of where you’ll be using it is largely irrelevant to be honest. The content in the right-hand column of the page could have been anything (or nothing!) and the same problem would still occur. Try to abstract the problem away from details about content, and focus on what it is which actually affects the situation. It’s a good exercise to try and create a
Comment posted by ADyson
P.S. the overflow-y:scroll (or “auto”, for preference, so you don’t get a scrollbar when you don’t actually need one) is still necessary, it just isn’t the complete solution.
Comment posted by AAM
Sure. Will keep that in mind before asking the next question. Thanks for sharing such a helpful example there 🙂
Comment posted by ADyson
No worries. BTW the minimal-reproducible example thing is useful in another way too. Many people, including me, often find that the simple exercise of doing that actually ends up helping them solving the problem themselves. By removing code until the problem stops happening (or the opposite – starting again from nothing and adding code back in until it occurs again), it helps you to narrow down precisely where the issue is happening. Once you know that, it’s usually a lot clearer how to fix it (or at least it’s clearer what else you need to find out in order to try and fix it).
