jQuery FullCalendar事件排序
我有许多事件是全天的事件，并且都是在同一时间开始的。我按照希望它们在完整日历视图上显示的顺序创建事件，但它们似乎总是以其他方式排序。
如何按字母顺序或按id对事件进行排序？
编辑:添加数据的示例数组。在日历中，我预计Supervisor事件每天都会出现在第一位，按字母顺序排在Tech1和Tech2之前，它的id也是以下事件的出租编号。相反，我每天都会得到一个随机的订单。
例如：
day of 2011-11-05订单显示为Tech2、Tech1、Tech2、Supervisor。
day of 2011-11-06订单显示为Supervisor、Tech1、Tech2、Tech2。
我要求排序至少每天保持一致，理想情况下是按照标题的字母顺序或id的顺序排序。
var events=[
{id:1, title:'Supervisor',start:'2011-11-05T00:00:00-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:2, title:'Tech2',start:'2011-11-05T00:00:00-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:3, title:'Tech2',start:'2011-11-05T00:00:00-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:4, title:'Tech1',start:'2011-11-05T00:00:00-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:5, title:'Tech1',start:'2011-11-05T00:00:00-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:6, title:'Tech1',start:'2011-11-05T00:00:00-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:7, title:'Supervisor',start:'2011-11-06T00:00:00-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:8, title:'Tech2',start:'2011-11-06T00:00:00-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:9, title:'Tech2',start:'2011-11-06T00:00:00-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:10, title:'Tech1',start:'2011-11-06T00:00:00-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:11, title:'Tech1',start:'2011-11-06T00:00:00-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:12, title:'Tech1',start:'2011-11-06T00:00:00-05:00',st_hours:10,ot_hours:0,allDay:true}
];EDIT2:这个问题似乎只存在于Google Chrome中。事件按照我期望的顺序呈现在IE9和FF8中。我用来开发的Chrome15似乎是唯一受影响的浏览器。
铬
FireFox
回答 5
Stack Overflow用户
发布于 2011-12-30 02:28:19
我发现chrome尊重开始时间。在构建事件时，我只需向列表中的每一项添加一秒。在本例中，我有一个结果集，其中列中包含特定日期的每个值。Start在结果集中的第0列，title在第1列。
在我的示例中，我执行以下操作：
var startVal = "";
$.each(data.ResultSet, function(row)
title = data.ResultSet[row][1];
startVal = new Date(data.ResultSet[row][0]);
startVal.setSeconds(startVal.getSeconds() + row);
start: startVal;..。
这样，我就可以按照放入事件对象中的顺序显示标题。
在您的数据示例中，我将进行以下更改：
var events=[
{id:1, title:'Supervisor',start:'2011-11-05T00:00:01-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:2, title:'Tech2',start:'2011-11-05T00:00:02-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:3, title:'Tech2',start:'2011-11-05T00:00:03-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:4, title:'Tech1',start:'2011-11-05T00:00:04-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:5, title:'Tech1',start:'2011-11-05T00:00:05-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:6, title:'Tech1',start:'2011-11-05T00:00:06-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:7, title:'Supervisor',start:'2011-11-06T00:00:07-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:8, title:'Tech2',start:'2011-11-06T00:00:08-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:9, title:'Tech2',start:'2011-11-06T00:00:09-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:10, title:'Tech1',start:'2011-11-06T00:00:10-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:11, title:'Tech1',start:'2011-11-06T00:00:11-05:00',st_hours:10,ot_hours:0,allDay:true},
{id:12, title:'Tech1',start:'2011-11-06T00:00:12-05:00',st_hours:10,ot_hours:0,allDay:true}];希望这能有所帮助！
肯
Stack Overflow用户
发布于 2015-09-10 19:18:41
嗨,
对于那些一直在寻找更好的解决方案的人来说，现在在fullcalendar的2.4.0版本中有了一个新的事件，称为eventOrder。
默认情况下，FullCalendar决定将持续时间较长且开始时间较早的事件排序在其他事件之上。但是，事件通常具有完全相同的开始时间和持续时间，对于全天事件尤其如此。默认情况下，发生这种情况时，将按标题的字母顺序对事件进行排序。eventOrder提供了覆盖此行为的功能。
Stack Overflow用户
发布于 2015-12-06 05:04:43
我想在RageAgainTheMachine响应中添加一些东西。
如果您想完全覆盖按开始日期排序(allDaySlot & month & basics视图)。例如，根据颜色对它们进行排序。
1.将eventOrder初始化为颜色。
eventOrder：‘颜色，开始’
2.更改compareSegs函数。
// original function
compareSegs: function(seg1, seg2) {
return seg1.eventStartMS - seg2.eventStartMS || // earlier events go first
seg2.eventDurationMS - seg1.eventDurationMS || // tie? longer events go first
seg2.event.allDay - seg1.event.allDay || // tie? put all-day events first (booleans cast to 0/1)
compareByFieldSpecs(seg1.event, seg2.event, this.view.eventOrderSpecs);
}
// custom function
compareSegs: function(seg1, seg2) {
if(this.view.name=="basicWeek"){ // ordering events by color in ListView
return seg2.event.allDay - seg1.event.allDay || // tie? put all-day events first (booleans cast to 0/1)
compareByFieldSpecs(seg1.event, seg2.event, this.view.eventOrderSpecs);
}
else{
return seg1.eventStartMS - seg2.eventStartMS || // earlier events go first
seg2.eventDurationMS - seg1.eventDurationMS || // tie? longer events go first
seg2.event.allDay - seg1.event.allDay || // tie? put all-day events first (booleans cast to 0/1)
compareByFieldSpecs(seg1.event, seg2.event, this.view.eventOrderSpecs);
}
}在这种情况下，我只想在"basicVeek“视图中按颜色对事件进行排序。然后，我删除了eventStartMS和eventDurationMS测试。
删除：
seg1.eventStartMS - seg2.eventStartMS || // earlier events go first
seg2.eventDurationMS - seg1.eventDurationMS || // tie? longer events go firsthttps://stackoverflow.com/questions/8231902
复制相似问题
腾讯云开发者
