FullCalendar eventOverlap 并排

Question

下面的代码运行良好。 eventDrag 和 Drop 我可以放置在 table 内的任何地方。

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

我想在其他事件的顶部和底部停止拖动事件。其他事件只有左右两边我想拖拽移动事件

发表评论以进一步说明。谢谢！

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

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

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

您可以通过设置

在 fullCalendar 中阻止这种情况

eventOverlap: false

（根据我在评论中的原始建议）。

这是一个演示。例如，现在不可能将 "event 1" 移动到 "Auditorium C" 资源中的 "event 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>

FullCalendar eventOverlap 并排

FullCalendar eventOverlap side by side only

html

javascript

css

jquery

fullcalendar