I have been researching earlier questions such as this one regarding custom sorting of all day events in Fullcalendar and cannot achieve what I want. My goal is to implement a custom sort solution that will order events that fall on the same day based on an integer property. The view of the calendar is set to month, and the events are all day events.

Here is a sample of the data:

[
  {
    "title": "Zed item",
    "start": "2015-01-12T17:12:00-05:00",
    "end": "2015-01-13T17:12:00-05:00",
    "level": 1
  },
  {
    "title": "Alpha item",
    "start": "2015-01-12T17:12:00-05:00",
    "end": "2015-01-13T17:12:00-05:00",
    "level": 2
  }
]

I expect to see "Zed" listed first, followed by "Alpha". Fullcalendar is sorting based on title.

Some sources suggest adding a minute to each time to set the order, and I have tried that as well:

event.start = moment(step.StartDate()).add(level, "m");

I have been unsuccessful with this approach as well.

Update

It occurred to me that since the sort order is defaulted to using title, then the same affect can be achieved by pre-pending a space to the title will force the correct order. When the calendar is rendered the spaces are not displayed. This work around may be the only recourse, although I would prefer adding a minute as opposed to adding spaces.

I have been researching earlier questions such as this one regarding custom sorting of all day events in Fullcalendar and cannot achieve what I want. My goal is to implement a custom sort solution that will order events that fall on the same day based on an integer property. The view of the calendar is set to month, and the events are all day events.

Here is a sample of the data:

[
  {
    "title": "Zed item",
    "start": "2015-01-12T17:12:00-05:00",
    "end": "2015-01-13T17:12:00-05:00",
    "level": 1
  },
  {
    "title": "Alpha item",
    "start": "2015-01-12T17:12:00-05:00",
    "end": "2015-01-13T17:12:00-05:00",
    "level": 2
  }
]

I expect to see "Zed" listed first, followed by "Alpha". Fullcalendar is sorting based on title.

Some sources suggest adding a minute to each time to set the order, and I have tried that as well:

event.start = moment(step.StartDate()).add(level, "m");

I have been unsuccessful with this approach as well.

Update

It occurred to me that since the sort order is defaulted to using title, then the same affect can be achieved by pre-pending a space to the title will force the correct order. When the calendar is rendered the spaces are not displayed. This work around may be the only recourse, although I would prefer adding a minute as opposed to adding spaces.

• javascript
• fullcalendar
• momentjs

• 1 adding a minute won't help, because fullcalender is likely ignoring the time due to the allDay flag being set. just like it will ignore the end time – warath-coder Commented Jan 13, 2015 at 23:28
• Have you had a scenario when you needed to sort using other data other than title? – David Robbins Commented Jan 14, 2015 at 14:14
• No... i would look into modify the source code for your purposes if the spacing trick doesn't work out or you need better control. – warath-coder Commented Jan 14, 2015 at 15:44
• FYI the spacing trick worked for me (FullCalendar v 2.3.1.) – Bampfer Commented May 27, 2015 at 16:35

3 Answers 3

I was looking for a similar solution.

Fullcalendar version 2.4.0 now supports the eventOrder method, documentation here:

http://fullcalendar.io/docs/event_rendering/eventOrder/

I ran into the same problem, I used nothing but all day events and my events source already had the events in the correct order in which i wanted them to appear, however full cal was sorting them alphabetically. I opened the fullcalendar.js file and mented out all instances segs.sort(pareSegs); this fixed my problem and allowed my events to be displayed in the order they occurred in my events source JSON object. I'm not sure if this broke any other functionality but for my app this worked perfectly.

If you want to pletely 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 pareSegs function. (fullcalendar.js)

// original function
pareSegs: 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)
        pareByFieldSpecs(seg1.event, seg2.event, this.view.eventOrderSpecs);
}

// custom function
pareSegs: 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)
        pareByFieldSpecs(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)
                    pareByFieldSpecs(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