我已經檢查了API並且一直未能找到我要查找的內容,是否可以在屏幕上拖動和重新排列資源?FullCalendar - 垂直資源訂單安排
在這個例子中,我可以拖動並重新訂購從A,B,C,D
到B,C,A,D
的房間嗎?
https://fullcalendar.io/js/fullcalendar-scheduler-1.6.2/demos/vertical-resource-view.html
謝謝
我已經檢查了API並且一直未能找到我要查找的內容,是否可以在屏幕上拖動和重新排列資源?FullCalendar - 垂直資源訂單安排
在這個例子中,我可以拖動並重新訂購從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的方法使其檢索&重新繪製顯示。我已將排序屬性添加到日曆選項 - resourceOrder: 'sortOrder'
以確保它正確地對資源進行排序。
FullCalendar資源有兩個截然不同的視圖 - 垂直,資源爲html th
單元,水平資源爲html td
。在垂直情況下,jQueryUI Sortable事件會丟失,必須在調用refetchResources
後重新應用。我已經在下面包含了這兩種佈局的代碼。
要運行,請將html保存在\fullcalendar-scheduler-1.6.2\demos\
中 - 路徑與該文件夾相關。
縱向來看:
<!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>
垂直演示:http://output.jsbin.com/tajubemike/1 –
謝謝,我感謝您的詳細解答。 – Deano
我看不到任何的方式。 – ADyson