FullCalendar: How to sort & display Events on Day of MonthView?

Question

All events on day slot of monthly view are sorted based on the start time ie event start hour 0-23, hour 0 on top and 23 on bottom.

But I want to show the active( event.IsActive == true ) tasks on top and after the Active task list, inactive( event.IsActive == false ) tasks will be displayed sorted by start hour 0-23.

Example:

1. ActiveTask-1 12:00AM
2. ActiveTask-2 3:00AM
3. ActiveTask-3 21:45PM
4. InactiveTask-1 12:00AM
5. InactiveTask-2 7:00AM
6. InactiveTask-3 23:30PM

Is this possible in fullCalendar?

Answer 1

Your request will need to directly patch the fullcalendar code. This is mandatory because fullcalendar doesn't expose this function to the outside world.

I did check my response with version 1.4.11, but looking at the 1.5 branch on github shows that it should be the same.

The function to be patched is segCmp , (found in src/util.js for the source version, or simply near the end of the file in fullcalendar.js)

The original version is:

function segCmp(a, b) {
  return (b.msLength - a.msLength) * 100 + (a.event.start - b.event.start);
}

The patched version should look like that:

function segCmp(a, b) {
  var activeDiff = ((b.event.IsActive || false) - (a.event.IsActive || false));
  if (activeDiff != 0) return activeDiff;
  return (b.msLength - a.msLength) * 100 + (a.event.start - b.event.start);
}

I simply check wether the events have a different IsActive state and return the diff, if no diff the previous algorithm is preserved. (Note the b - a diff because you want IsActive:true BEFORE IsActive:false)

Note that segCmp is called when splitting/ordering events and thus will apply in all views.

Best Regards,

Pascal

Answer 2

实施此功能后，它将解决您的问题： http : //code.google.com/p/fullcalendar/issues/detail?id=364

Answer 3

If you want to completely override the sorting by start date for allDaySlot, month, basics views. For example to sort them by color.

1.Initialise eventOrder to color. (html/php file you are using)

eventOrder: 'color,start'

2.Change the compareSegs function. (fullcalendar.js)

// 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