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