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 i.e. 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.jsfor 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

when this feature is implemented, it would solve your problem: 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