FullCalendar事件仅并排重叠

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

很难理解，但是我想您只想拖动左右两侧（一次到另一次）。 最多（从一种资源到另一种）。

要停止拖动到另一个资源，您只需要在fullcalender选项中添加以下选项

eventResourceEditable: false

---

例

 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, eventResourceEditable: 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> 

我希望这就是你想要的

Answer 2

据我现在所了解，您希望不可能将一个事件放置在同一资源中的另一个事件下方。

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

您可以通过设置

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>