Geek Answers Handbook

JQuery sorting FullCalendar events

I have many events that are all-day events, and it all starts at the same time. I create events in the order in which I would like them to appear in the full calendar view, but they always seem to be sorted differently.

How can I sort events alphabetically or by their identifier?

EDIT: Adding an Example Data Array. In the calendar, I expected the Supervisor event to appear every day, alphabetically before Tech1 and Tech2, and its identifier is the landlord's number, as well as the following events. Instead, I get a random order every day.

eg:

Day 2011-11-05 the order is displayed as Tech2, Tech1, Tech1, Tech1, Tech2, Supervisor.

Day 2011-11-06 the order is displayed as Supervisor, Tech1, Tech1, Tech1, Tech2, Tech2.

I require that the sorting be at least consistent from day to day and ideally be either in alphabetical order of the header or in sequential order of identifier.

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 seems this problem only exists in Google Chrome. Events are displayed in the order in which I expect them in both IE9 and FF8. Chrome 15, which I am developing, seems like the only browser.

Chrome Chrome Fire fox Firefox

+7
source share
5 answers

I found that chrome respects start time. When creating an event, I simply add a second to each item in the list. In this example, I have a result set with each of the values ​​for a specific date in the columns. The start is in column 0, and the title is in column 1 in the result set.

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;

...

That way, I have a title displayed in the order, which I then put in the event object.

In your sample data, 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

+7
source


Hi,

For those who continue to search for the best solution for this, there is now a new event in version 2.4.0 of fullcalendar called eventOrder .

By default, FullCalendar decides that events with longer durations and earlier start times are sorted over other events. However, events often have the same exact time and start time, which is especially true for all-day events. By default, when this happens, events are sorted alphabetically by name. eventOrder provides the ability to override this behavior .

+5
source

I would like to add something to the RageAgainTheMachine answer.

If you want to completely redefine sorting by start date (allDaySlot and monthly and base views). For example, to sort them by color.

1. Enter the color of eventOrder .

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 the event by color in the "basicVeek" view. Then I delete the eventStartMS and eventDurationMS tests.

REMOVE:

 seg1.eventStartMS - seg2.eventStartMS || // earlier events go first seg2.eventDurationMS - seg1.eventDurationMS || // tie? longer events go first
+2
source

The minimum version of 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)}
+1
source

The fullcalendar.js file has 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 arrange events by id.

0
source

More articles:


All Articles