jQuery FullCalendar event sorting

问题

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

回答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

回答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.

回答3:

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

回答4:

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

回答5:

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

标签

jquery

fullcalendar