I have numerous events that are all day events, and all start at the same time. I create the events in the order I would like them to appear on the full calendar view, but they always seem to be sorted some other way.
How can I have the events sorted either alphabetically or by their id?
EDIT: Adding example Array of data. In the calendar, I expected that the Supervisor event would appear first each day, as alphabetically it is before Tech1 and Tech2, and its id is a lessor number than the following events as well. Instead, I get a random order each day.
eg:
day of 2011-11-05 the order displays as Tech2, Tech1, Tech1, Tech1, Tech2, Supervisor.
day of 2011-11-06 the order displays as Supervisor, Tech1, Tech1, Tech1, Tech2, Tech2.
I require that the sorting at least be consistent from day to day, and ideally be in either alphabetical order of the title, or in sequential order of the 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: It appears this problem only exists in Google Chrome. Events render in the order I expect them to in both IE9 as well as FF8. Chrome 15, which I develop in, appears to be the only effected browser.
Chrome
FireFox
I found that chrome respects the start time. When building the event, I simply add a second to each item in the list. In the example, I have a resultset with each of the values for the specific date in columns. Start is in column 0, and title is in column 1 in the resultset.
In my example, I do the following:
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;
...
This way I have the title displayed in the order I put then into the event object.
In your data example, I would make the following change:
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}];
Hope this helps!
Ken
Hi,
For those that keep searching for a better solution to this, now there is a new event in the version 2.4.0 of fullcalendar called eventOrder.
By default, FullCalendar decides that events with longer durations and earlier start times are sorted above other events. However, events often have the same exact start time and duration, which is especially true for all-day events. By default, when this happens, events are sorted alphabetically by title. eventOrder provides the ability to override this behavior.
I would like to add something to the RageAgainTheMachine response.
If you want to completely override the sorting by start date (allDaySlot & month & basics views). For example to sort them by color.
1.Initialise eventOrder to color.
eventOrder: 'color,start'
2.Change the compareSegs function.
// 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);
}
}
In this case I only want to sort event by color in the "basicVeek" view. Then I have remove the eventStartMS & eventDurationMS tests.
REMOVE:
seg1.eventStartMS - seg2.eventStartMS || // earlier events go first
seg2.eventDurationMS - seg1.eventDurationMS || // tie? longer events go first
Minified version of the sorting by color.
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)}
In the fullcalendar.js file, there is a function called
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);
}.
you can define your own rules such as return seg1.id -seg2.id to order events by id.
来源：https://stackoverflow.com/questions/8231902/jquery-fullcalendar-event-sorting