jQuery FullCalendar事件排序

我有很多活动都是全天活动，而且都是在同一时间开始的。 我按照我希望它们出现在完整日历视图中的顺序创建事件，但它们似乎总是以其他方式排序。

如何按字母或按ID排序事件？

编辑：添加示例数据数组。 在日历中，我预计Supervisor事件将每天首先出现，按照字母顺序出现在Tech1和Tech2之前，其id是出租人数，也是以下事件。 相反，我每天都会收到随机订单。

例如：

2011-11-05的一天，该订单显示为Tech2，Tech1，Tech1，Tech1，Tech2，Supervisor。

2011-11-06的一天，该订单显示为Supervisor，Tech1，Tech1，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中。 我开发的Chrome 15似乎是唯一受影响的浏览器。

铬 火狐

Answer 1

我发现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}]; 

希望这可以帮助！

肯

Answer 2

嗨，

对于那些一直在寻找更好解决方案的人来说，现在在fullcalendar版本2.4.0中有一个名为eventOrder的新事件。

默认情况下，FullCalendar会确定具有较长持续时间和较早开始时间的事件的排序高于其他事件。 但是，事件通常具有相同的确切开始时间和持续时间，对于全天事件尤其如此。 默认情况下，发生这种情况时，事件按标题按字母顺序排序。 eventOrder提供了覆盖此行为的function 。

Answer 3

我想在RageAgainTheMachine响应中添加一些内容。

如果要完全覆盖按开始日期排序（allDaySlot＆month＆basics视图）。 例如，按颜色对它们进行排序。

1.Initialise eventOrder to color。

eventOrder：’color，start’

2.更改compareSegsfunction。

 // 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 first 

Answer 4

按颜色排序的缩小版本。

  compareSegs:function(a,b){if(this.view.name=="basicWeek"){return b.event.allDay-a.event.allDay||B(a.event,b.event,this.view.eventOrderSpecs)}else{return a.eventStartMS-b.eventStartMS||b.eventDurationMS-a.eventDurationMS||b.event.allDay-a.event.allDay||B(a.event,b.event,this.view.eventOrderSpecs)} 

Answer 5

在fullcalendar.js文件中，有一个名为的函数

 compareSegs(seg1, seg2){ return seg1.eventStartMS - seg2.eventStartMS || seg2.eventDurationMS - seg1.eventDurationMS || seg2.event.allDay - seg1.event.allDay || (seg1.event.title || '').localeCompare(seg2.event.title); }. 

您可以定义自己的规则，例如return seg1.id -seg2.id ，以按ID排序事件。