我已经检查了API，但找不到我要找的东西，是否可以在屏幕上拖动和重新排列资源？
在此示例中，是否可以将房间从A,B,C,D拖动并重新排序到B,C,A,D？
https://fullcalendar.io/js/fullcalendar-scheduler-1.6.2/demos/vertical-resource-view.html
谢谢
当然，但并非没有外部拖放代码。下面，我使用了jQueryUI的Sortable功能并挂接到了它的事件中。
为此，通过函数填充资源列表。这意味着我们可以对资源重新排序，然后调用 Callendar 的 refetchResources 方法让它检索并重绘显示。我在日历选项中添加了一个排序属性 - resourceOrder: 'sortOrder'以确保它正确排序资源。
FullCalendar 资源有两种不同的视图 - 垂直视图，资源作为 html th单元格，水平视图将资源作为 html td。在垂直情况下，jQueryUI 可排序事件将丢失，必须在调用 refetchResources 后重新应用。 我在下面包含了两种布局的代码。
要运行，请将 html 保存为 fullcalendar-scheduler-1.6.2demos - 路径相对于该文件夹。
垂直视图：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='../scheduler.min.css' rel='stylesheet' />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../lib/fullcalendar.min.js'></script>
<script src='../scheduler.min.js'></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var resources = [
{ id: 'a', sortOrder: 1},
{ id: 'b', sortOrder: 2, eventColor: 'green' },
{ id: 'c', sortOrder: 3, eventColor: 'orange' },
{ id: 'd', sortOrder: 4 },
{ id: 'e', sortOrder: 5 },
{ id: 'f', sortOrder: 6, eventColor: 'red' },
{ id: 'g', sortOrder: 7 }
];
$(function() { // document ready
$('#calendar').fullCalendar({
now: '2017-05-07',
editable: true, // enable draggable events
aspectRatio: 1.8,
scrollTime: '00:00', // undo default 6am scrollTime
header: {
left: 'today prev,next',
center: 'title',
right: ''
},
defaultView: 'agendaDay',
views: {},
resourceLabelText: 'Rooms',
resourceText: function(resource) {
return 'Auditorium ' + ('' + resource.id).toUpperCase();
},
resourceOrder: 'sortOrder',
resources: resourcesFunc,
events: [
{ id: '1', resourceId: 'b', start: '2017-05-07T02:00:00', end: '2017-05-07T07:00:00', title: 'event 1' },
{ id: '2', resourceId: 'c', start: '2017-05-07T05:00:00', end: '2017-05-07T22:00:00', title: 'event 2' },
{ id: '3', resourceId: 'd', start: '2017-05-06', end: '2017-05-08', title: 'event 3' },
{ id: '4', resourceId: 'e', start: '2017-05-07T03:00:00', end: '2017-05-07T08:00:00', title: 'event 4' },
{ id: '5', resourceId: 'f', start: '2017-05-07T00:30:00', end: '2017-05-07T02:30:00', title: 'event 5' }
]
});
function resourcesFunc(callback) {
callback(resources);
}
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
<script>
$(function() {
var initialPos, finalPos;
$("table thead tr").sortable({
items: "> th:gt(0)",
axis: "x"
})
.disableSelection()
.on("sortstart", function(event, ui) {
initialPos = ui.item.index() - 1; // need to subtract 1 because of the empty first header cell
})
.on("sortupdate", function(event, ui) {
sortUpdate(event, ui);
});
function sortUpdate(event, ui) {
finalPos = ui.item.index() - 1; // need to subtract 1 because of the empty first header cell
if (finalPos == -1) return; // "sortupdate" gets called twice for an unknown reason. Second time with finalPos == -1
var tmpResources = [];
for (var i = 0; i < resources.length; i++) {
tmpResources.push(resources[i]);
}
// reorder sorting to match
if (finalPos > initialPos) {
tmpResources[finalPos] = resources[initialPos];
tmpResources[finalPos].sortOrder = finalPos + 1;
for (var i = initialPos + 1; i <= finalPos; i++) {
//resources[i].sortOrder -= 1;
tmpResources[i - 1] = resources[i];
tmpResources[i - 1].sortOrder -= 1;
}
} else {
tmpResources[finalPos] = resources[initialPos];
tmpResources[finalPos].sortOrder = finalPos + 1;
for (var i = initialPos - 1; i >= finalPos; i--) {
//resources[i].sortOrder += 1;
tmpResources[i + 1] = resources[i];
tmpResources[i + 1].sortOrder += 1;
}
}
for (var i = 0; i < tmpResources.length; i++) {
resources[i] = tmpResources[i];
}
$('#calendar').fullCalendar('refetchResources'); // refresh display
// sorting is lost after a refetch when in vertical display, so need to reapply:
$("table thead tr").sortable({
items: "> th:gt(0)",
axis: "x"
})
.disableSelection()
.on("sortstart", function(event, ui) {
initialPos = ui.item.index() - 1; // need to subtract 1 because of the empty first header cell
})
.on("sortupdate", function(event, ui) {
sortUpdate(event, ui);
});
}
});
</script>
</body>
</html>
水平视图：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='../scheduler.min.css' rel='stylesheet' />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../lib/fullcalendar.min.js'></script>
<script src='../scheduler.min.js'></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var resources = [
{ id: 'a', sortOrder: 1},
{ id: 'b', sortOrder: 2, eventColor: 'green' },
{ id: 'c', sortOrder: 3, eventColor: 'orange' },
{ id: 'd', sortOrder: 4 },
{ id: 'e', sortOrder: 5 },
{ id: 'f', sortOrder: 6, eventColor: 'red' },
{ id: 'g', sortOrder: 7 }
];
$(function() { // document ready
$('#calendar').fullCalendar({
now: '2017-05-07',
editable: true, // enable draggable events
aspectRatio: 1.8,
scrollTime: '00:00', // undo default 6am scrollTime
header: {
left: 'today prev,next',
center: 'title',
right: ''
},
defaultView: 'timelineDay',
views: {
timelineThreeDays: {
type: 'timeline',
duration: {
days: 3
}
}
},
resourceLabelText: 'Rooms',
resourceText: function(resource) {
return 'Auditorium ' + ('' + resource.id).toUpperCase();
},
resourceOrder: 'sortOrder',
resources: resourcesFunc,
events: [
{ id: '1', resourceId: 'b', start: '2017-05-07T02:00:00', end: '2017-05-07T07:00:00', title: 'event 1' },
{ id: '2', resourceId: 'c', start: '2017-05-07T05:00:00', end: '2017-05-07T22:00:00', title: 'event 2' },
{ id: '3', resourceId: 'd', start: '2017-05-06', end: '2017-05-08', title: 'event 3' },
{ id: '4', resourceId: 'e', start: '2017-05-07T03:00:00', end: '2017-05-07T08:00:00', title: 'event 4' },
{ id: '5', resourceId: 'f', start: '2017-05-07T00:30:00', end: '2017-05-07T02:30:00', title: 'event 5' }
]
});
function resourcesFunc(callback) {
callback(resources);
}
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
<script>
$(function() {
var initialPos, finalPos;
$("table tbody").sortable({
axis: "y"
})
.disableSelection()
.on("sortstart", function(event, ui) {
initialPos = ui.item.index();
})
.on("sortupdate", function(event, ui) {
finalPos = ui.item.index();
if (finalPos == -1) return; // "sortupdate" gets called twice for an unknown reason. Second time with finalPos == -1
var tmpResources = [];
for (var i = 0; i < resources.length; i++) {
tmpResources.push(resources[i]);
}
// reorder sorting to match
if (finalPos > initialPos) {
tmpResources[finalPos] = resources[initialPos];
tmpResources[finalPos].sortOrder = finalPos + 1;
for (var i = initialPos + 1; i <= finalPos; i++) {
//resources[i].sortOrder -= 1;
tmpResources[i - 1] = resources[i];
tmpResources[i - 1].sortOrder -= 1;
}
} else {
tmpResources[finalPos] = resources[initialPos];
tmpResources[finalPos].sortOrder = finalPos + 1;
for (var i = initialPos - 1; i >= finalPos; i--) {
//resources[i].sortOrder += 1;
tmpResources[i + 1] = resources[i];
tmpResources[i + 1].sortOrder += 1;
}
}
for (var i = 0; i < tmpResources.length; i++) {
resources[i] = tmpResources[i];
}
$('#calendar').fullCalendar('refetchResources'); // refresh display
})
});
</script>
</body>
</html>