मैंने एपीआई की जांच की है और जो भी मैं ढूंढ रहा हूं उसे ढूंढने में सक्षम नहीं हूं, क्या स्क्रीन पर संसाधनों को खींचना और पुन: व्यवस्थित करना संभव है?फुल कैलेंडर - वर्टिकल संसाधन ऑर्डर व्यवस्था
इस उदाहरण में, क्या मैं उदाहरण के लिए A,B,C,D से B,C,A,D पर कमरे खींच और पुन: ऑर्डर कर सकता हूं?
https://fullcalendar.io/js/fullcalendar-scheduler-1.6.2/demos/vertical-resource-view.html
आप
ज़रूर धन्यवाद, लेकिन बाहरी खींचें बिना नहीं और ड्रॉप कोड। नीचे, मैंने jQueryUI की Sortable कार्यक्षमता का उपयोग किया है और इसकी घटनाओं में लगाया है।
इस काम को बनाने के लिए संसाधन सूची किसी फ़ंक्शन के माध्यम से पॉप्युलेट की जाती है। इसका अर्थ यह है कि हम संसाधनों को पुन: व्यवस्थित कर सकते हैं और फिर & डिस्प्ले को फिर से निकालने के लिए कॉलendar की refetchResources विधि को कॉल कर सकते हैं। मैंने कैलेंडर विकल्पों में एक सॉर्टिंग प्रॉपर्टी जोड़ दी है - यह सुनिश्चित करने के लिए कि यह संसाधनों को सही तरीके से ऑर्डर करता है, resourceOrder: 'sortOrder'।
फुल कैलेंडर संसाधनों के साथ दो अलग-अलग विचार हैं - लंबवत, एचटीएमएल th कोशिकाओं के रूप में संसाधनों के साथ, और संसाधनों के साथ क्षैतिज एचटीएमएल td के रूप में। ऊर्ध्वाधर मामले के साथ jQueryUI सॉर्ट करने योग्य ईवेंट खो गए हैं और refetchResources पर कॉल करने के बाद पुनः लागू किया जाना चाहिए। मैंने नीचे दोनों लेआउट के लिए कोड शामिल किया है।
चलाने के लिए, \fullcalendar-scheduler-1.6.2\demos\ में 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: '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