1

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.

Here's the code:

form.php 

<head>
<link href='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/interaction@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link href='https://unpkg.com/@fullcalendar/timeline@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/@fullcalendar/timeline@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/resource-common@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.min.js'></script>
<link rel="stylesheet" href="css/main.css" media="all">
<link href="main.css" rel="stylesheet">
<script src='main.js'></script>
</head>
  <div id='external-events' >
 <p>
  <strong>Draggable Events</strong>
</p>

<?php
require "draggableevents.php";
$events = getDraggableEvents();
foreach ($events as $event)
{
?>
<div class='fc-event' ><?php echo $event['EventName'] ; ?></div>
<?php
}
?>
<p>
  <input type='checkbox' id='drop-remove' />
  <label for='drop-remove'>remove after drop</label>
</p>
</div>
<div id='calendar-container'>
   <div id='calendar'></div>
 </div>
 </body>

main.css

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}
#external-events {
  position: fixed;
  z-index: 2;
  top: 20px;
  left: 20px;
  width: 150px;
 padding: 0 10px;
 border: 1px solid #ccc;
 background: #eee;
 overflow-y:auto;
}

#external-events .fc-event {
   margin: 1em 0 ;
   cursor: move;  
 }
#calendar-container {
  position: relative;
  z-index: 1;
  margin-left: 200px;
}
#calendar {
   max-width: 1500px;
   margin: 20px auto;
   max-height: 900px;
 }

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.

AAM
  • 321
  • 5
  • 24

1 Answers1

1

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

Something like this:

bottom: 20px;

will do the job.

Demo: https://codepen.io/ADyson82/pen/GRpNbpQ

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.

ADyson
  • 57,178
  • 14
  • 51
  • 63
  • 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!!!:) – AAM Apr 22 '20 at 13:45
  • 1
    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 [minimal, reproducible example](https://stackoverflow.com/help/mcve) of your problems, such as [this one](https://codepen.io/ADyson82/pen/GRpNbYY) which demonstrates the exact same problem as in your question. – ADyson Apr 22 '20 at 13:46
  • 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. – ADyson Apr 22 '20 at 13:51
  • Sure. Will keep that in mind before asking the next question. Thanks for sharing such a helpful example there :) – AAM Apr 22 '20 at 14:04
  • 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). – ADyson Apr 22 '20 at 14:15