我已经检查了 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 资源有两种不同的 View - 垂直 View ，资源作为 html th 单元格，水平 View ，资源作为 html td。在垂直情况下，jQueryUI Sortable 事件丢失，必须在调用 refetchResources 后重新应用。我在下面包含了两种布局的代码。
要运行，请将 html 保存在 \fullcalendar-scheduler-1.6.2\demos\ - 路径是相对于该文件夹的。
垂直 View :
<!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>
水平 View :
<!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>
关于javascript - FullCalendar - 垂直资源顺序排列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44837721/
我遵循了教程http://gettingstartedwithchef.com/,第1章。我的运行list是"run_list":["recipe[apt]","recipe[phpap]"]我的phpapRecipe默认Recipeinclude_recipe"apache2"include_recipe"build-essential"include_recipe"openssl"include_recipe"mysql::client"include_recipe"mysql::server"include_recipe"php"include_recipe"php::modul
这是一道面试题，我没有答对，但还是很好奇怎么解。你有N个人的大家庭，分别是1,2,3,...,N岁。你想给你的大家庭拍张照片。所有的家庭成员都排成一排。“我是家里的friend，建议家庭成员安排如下:”1岁的家庭成员坐在这一排的最左边。每两个坐在一起的家庭成员的年龄相差不得超过2岁。输入:整数N，1≤N≤55。输出:摄影师可以拍摄的照片数量。示例->输入:4，输出:4符合条件的数组:[1,2,3,4][1,2,4,3][1,3,2,4][1,3,4,2]另一个例子:输入:5输出:6符合条件的数组:[1,2,3,4,5][1,2,3,5,4][1,2,4,3,5][1,2,4,5,3][
我有这样的哈希trial_hash={"key1"=>1000,"key2"=>34,"key3"=>500,"key4"=>500,"key5"=>500,"key6"=>500}我按值降序排列:my_hash=trial_hash.sort_by{|k,v|v}.reverse我现在是这样理解的:[["key1",1000],["key4",500],["key5",500],["key6",500],["key3",500],["key2",34]]但我希望当值相同时按键的升序排序。我该怎么做？例如:上面的散列将以这种方式排序:[["key1",1000],["key3",500
当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub
我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容，包括相关问题和stackoverflow上的答案，但仍然无法正常工作。我正在使用嵌套资源，但无法使表单正常工作。我总是遇到错误，例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle
RSpec似乎按顺序匹配方法接收的消息。我不确定如何使以下代码工作:allow(a).toreceive(:f)expect(a).toreceive(:f).with(2)a.f(1)a.f(2)a.f(3)我问的原因是a.f的一些调用是由我的代码的上层控制的，所以我不能对这些方法调用添加期望。 最佳答案 RSpecspy是测试这种情况的一种方式。要监视一个方法，用allowstub，除了方法名称之外没有任何约束，调用该方法，然后expect确切的方法调用。例如:allow(a).toreceive(:f)a.f(2)a.f(1)
1.upto(9){|x|printx}为什么这行不通？{printx|x}}y呢？ 最佳答案 它用于传递给您的block的参数。即在您的示例中，upto将使用1到9中的每个数字调用您的block，当前值可作为x获得。block参数可以有任何名称，就像方法参数一样。例如1.upto(9){|num|putsnum是有效的。就像一个方法的参数一样，一个block也可以有多个参数。例如hash.each_pair{|key,value|puts"#{key}is#{value}"} 关于ru
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我正在尝试将一个资源属性的默认值设置为另一个属性的值。我正在为我正在构建的tomcat说明书定义一个资源，其中包含以下定义。我想要可以独立设置的“名称”和“服务名称”属性。当未设置服务名称时，我希望它默认为为“名称”提供的任何内容。以下不符合我的预期:attribute:name,:kind_of=>String,:required=>true,:name_attribute=>trueattribute:service_name,:kind_of=>String,:default=>:name注意第二行末尾的“:default=>:name”。当我在Recipe的新block中引用我
我正在构建一个小部件来显示奥运会的奖牌数。我有一个“国家”对象的集合，其中每个对象都有一个“名称”属性，以及奖牌计数的“金”、“银”、“铜”。列表应该排序:1.首先是奖牌总数2.如果奖牌相同，按类型分割(金>银>铜，即2金>1金+1银)3.如果奖牌和类型相同，则按字母顺序子排序我正在用ruby做这件事，但我想语言并不重要。我确实找到了一个解决方案，但如果感觉必须有更优雅的方法来实现它。这是我做的:使用加权奖牌总数创建一个虚拟属性。因此，如果他们有2个金牌和1个银牌，加权总数将为“3.020100”。1金1银1铜为“3.010101”由于我们希望将奖牌数排序为最高的，因此列表按降序排