如何使 fullcalendar4 中的可拖动事件区域可滚动？

Question

我正在开发具有可拖放事件的 fullcalendar 资源日历。我正在从数据库中获取可拖动事件区域，以便用户能够将它们拖放到日程表上。日历是可滚动的，但可拖动的事件区域不是。事件列表太长了，以至于它被截断了页面，因此无法完全看到。

代码如下：

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

我正在尝试使可拖动事件区域可滚动，无论是单独滚动还是与日历滚动本身一起滚动。我只发布了我认为相关的代码部分。如果您也想查看 JS 代码，请发表评论。

Answer 1

只需将 bottom CSS 属性添加到您的 #external-events 声明中。这指定 div 必须在哪里结束。否则它将填满整个页面的整个高度（即使页面的那部分在屏幕上不可见，并且由于 fixed 位置而无法访问。）

像这样：

bottom: 20px;

会完成任务的。

演示：https://codepen.io/ADyson82/pen/GRpNbpQ

感谢 this question 的部分答案。

P.S。尽管有问题的标题，但这实际上只是一个 CSS 问题，与 fullCalendar 无关。可拖动的事件区域只是一个div。它不是 fullCalendar 代码的一部分，也不是由它生成的，而是在页面中单独定义的。

如何使 fullcalendar4 中的可拖动事件区域可滚动？

How to make the draggable events area in fullcalendar4 scrollable?

html

css

fullcalendar

frontend

fullcalendar-4