jQuery FullCalendar event sorting

Question

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

Answer 1

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

Answer 2

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.