javascript - FullCalendar eventOverlap 并排

Question

下面的代码运行良好。 eventDrag 和 Drop 我可以放置在表格内的任何位置。

但是我只想将事件拖放到事件的左侧和右侧。

我想从其他事件的顶部和底部停止拖动事件。只有左侧和右侧的其他事件我想拖动和移动事件。

评论进一步澄清。谢谢!

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    plugins: [ 'interaction', 'resourceTimeline' ],
    header: {
      left: 'promptResource today prev,next',
      center: 'title',
      right: 'resourceTimelineMonth,resourceTimelineWeek'
    },
    aspectRatio: 1.5,
    defaultView: 'resourceTimelineMonth',
    resourceLabelText: 'Rooms',
	editable: true,
    resources: [{"id":"a","title":"Auditorium A"},{"id":"b","title":"Auditorium B"},
	{"id":"c","title":"Auditorium C"},
	{"id":"d","title":"Auditorium D","children":[{"id":"d1","title":"Room D1"},
	{"id":"d2","title":"Room D2"}]},
	{"id":"e","title":"Auditorium E"},
	{"id":"f","title":"Auditorium F"},
	{"id":"g","title":"Auditorium G"},
	{"id":"h","title":"Auditorium H"},
	{"id":"i","title":"Auditorium I"}],
	events: [{"resourceId":"d","title":"event 1","start":"2019-08-02","end":"2019-08-06"},
	{"resourceId":"c","title":"event 3","start":"2019-08-05","end":"2019-08-06"},
	{"resourceId":"f","title":"event 4","start":"2019-08-02","end":"2019-08-04"},
  {"resourceId":"g","title":"event 5","start":"2019-08-02","end":"2019-08-03"},
	{"resourceId":"b","title":"event 5","start":"2019-08-05T10:00:00+00:00","end":"2019-08-05T15:00:00+00:00"},
	{"resourceId":"e","title":"event 2","start":"2019-08-05T09:00:00+00:00","end":"2019-08-05T14:00:00+00:00"}]
  });

  calendar.render();
});

#calendar {
  max-width: 900px;
  margin: 40px auto;
}

<link href="https://fullcalendar.io/releases/core/4.2.0/main.min.css" rel="stylesheet"/>
<link href="https://fullcalendar.io/releases/timeline/4.2.0/main.min.css" rel="stylesheet"/>
<link href="https://fullcalendar.io/releases/resource-timeline/4.2.0/main.min.css" rel="stylesheet"/>
<script src="https://fullcalendar.io/releases/core/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/timeline/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/resource-common/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/resource-timeline/4.2.0/main.min.js"></script>


<div id="calendar"></div>

Answer 1

据我现在的理解，您希望不可能将同一资源中的事件置于另一个事件之下。

当一个事件在另一个事件之下时，则意味着这两个事件必须(至少部分)同时发生。这称为重叠。

您可以通过设置在 fullCalendar 中阻止这种情况

eventOverlap: false

(根据我在评论中的原始建议)。

这是一个演示。例如，现在不可能将“事件 1”移动到“礼堂 C”资源中的“事件 3”下方(即重叠)。

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    plugins: ['interaction', 'resourceTimeline'],
    header: {
      left: 'promptResource today prev,next',
      center: 'title',
      right: 'resourceTimelineMonth,resourceTimelineWeek'
    },
    aspectRatio: 1.5,
    defaultView: 'resourceTimelineMonth',
    resourceLabelText: 'Rooms',
    editable: true,
    eventOverlap: false,
    resources: [{
        "id": "a",
        "title": "Auditorium A"
      }, {
        "id": "b",
        "title": "Auditorium B"
      },
      {
        "id": "c",
        "title": "Auditorium C"
      },
      {
        "id": "d",
        "title": "Auditorium D",
        "children": [{
            "id": "d1",
            "title": "Room D1"
          },
          {
            "id": "d2",
            "title": "Room D2"
          }
        ]
      },
      {
        "id": "e",
        "title": "Auditorium E"
      },
      {
        "id": "f",
        "title": "Auditorium F"
      },
      {
        "id": "g",
        "title": "Auditorium G"
      },
      {
        "id": "h",
        "title": "Auditorium H"
      },
      {
        "id": "i",
        "title": "Auditorium I"
      }
    ],
    events: [{
        "resourceId": "d",
        "title": "event 1",
        "start": "2019-08-02",
        "end": "2019-08-06"
      },
      {
        "resourceId": "c",
        "title": "event 3",
        "start": "2019-08-05",
        "end": "2019-08-06"
      },
      {
        "resourceId": "f",
        "title": "event 4",
        "start": "2019-08-02",
        "end": "2019-08-04"
      },
      {
        "resourceId": "g",
        "title": "event 5",
        "start": "2019-08-02",
        "end": "2019-08-03"
      },
      {
        "resourceId": "b",
        "title": "event 5",
        "start": "2019-08-05T10:00:00+00:00",
        "end": "2019-08-05T15:00:00+00:00"
      },
      {
        "resourceId": "e",
        "title": "event 2",
        "start": "2019-08-05T09:00:00+00:00",
        "end": "2019-08-05T14:00:00+00:00"
      }
    ]
  });

  calendar.render();
});

#calendar {
  max-width: 900px;
  margin: 40px auto;
}

<link href="https://fullcalendar.io/releases/core/4.2.0/main.min.css" rel="stylesheet" />
<link href="https://fullcalendar.io/releases/timeline/4.2.0/main.min.css" rel="stylesheet" />
<link href="https://fullcalendar.io/releases/resource-timeline/4.2.0/main.min.css" rel="stylesheet" />
<script src="https://fullcalendar.io/releases/core/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/timeline/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/resource-common/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/resource-timeline/4.2.0/main.min.js"></script>


<div id="calendar"></div>