Как сделать область перетаскиваемых событий в fullcalendar4 прокручиваемой? - PullRequest
Новая
       19

Как сделать область перетаскиваемых событий в fullcalendar4 прокручиваемой?

1 голос
/ 20 апреля 2020

Я разрабатываю календарь ресурсов fullcalendar с возможностью перетаскивания событий. Я извлекаю область перетаскиваемых событий из базы данных, чтобы пользователи могли перетаскивать их в расписание. Календарь можно прокручивать, а область перетаскиваемых событий - нет. Список событий настолько велик, что он отрезан от страницы и, следовательно, не виден полностью.

Вот код:

форма. 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.

1 Ответ

1 голос
/ 22 апреля 2020

Просто добавьте свойство bottom CSS в ваше объявление #external-events. Это указывает, где должен заканчиваться div. В противном случае он будет занимать всю высоту всей страницы (даже если эта часть страницы не видна на экране и недоступна из-за позиции fixed.)

Примерно так: 

bottom: 20px;

выполнит эту работу.

Демонстрация: https://codepen.io/ADyson82/pen/GRpNbpQ

Благодарим за некоторые ответы на этот вопрос за идею.

PS Несмотря на заголовок вопроса, это на самом деле просто проблема CSS и на самом деле не имеет ничего общего с fullCalendar. Перетаскиваемая область событий - это просто div. Он не является частью или полностью генерируется кодом fullCalendar и определяется отдельно на странице.

...