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 t

Answer 1

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.

Answer 2

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 3

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.

Answer 4

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

Answer 5

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)}