Fullcalendar是否支持全天活动的自定义排序

时间:2015-01-12 22:55:35

标签: javascript fullcalendar momentjs

我一直在研究诸如this one之类的早期问题,关于Fullcalendar中的全天事件的自定义排序,并且无法达到我想要的效果。我的目标是实现一个自定义排序解决方案,该解决方案将根据整数属性对同一天的事件进行排序。日历视图设置为月份,事件为全天事件。

以下是数据样本:

[
  {
    "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
  }
]

我希望看到" Zed"首先列出,然后是" Alpha"。 Fullcalendar基于标题进行排序。

有些消息来源建议每次添加一分钟来设置订单,我也尝试过这样做:

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

我也没有成功使用这种方法。

更新

我想到,由于排序顺序默认为使用标题,因此通过预先挂起标题的空格将强制执行正确的顺序,可以实现相同的效果。渲染日历时,不显示空格。这项工作可能是唯一的办法,虽然我宁愿增加一分钟而不是增加空格。

3 个答案:

答案 0 :(得分:5)

我一直在寻找类似的解决方案。

Fullcalendar版本 2.4.0 现在支持eventOrder方法,文档在这里:

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

答案 1 :(得分:2)

如果要完全覆盖allDaySlot,month,basics视图的开始日期排序。 例如,按颜色对它们进行排序。

1.初始化eventOrder以进行着色。 (你正在使用的html / php文件)

eventOrder: 'color,start'

2.更改compareSegs功能。 (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);
    }
}

在这种情况下,我只想在“basicVeek”视图中按颜色对事件进行排序。 然后我删除了eventStartMS& eventDurationMS测试。

删除:

seg1.eventStartMS - seg2.eventStartMS || // earlier events go first
seg2.eventDurationMS - seg1.eventDurationMS || // tie? longer events go first

答案 2 :(得分:1)

我遇到了同样的问题,我只使用了一整天的活动,我的事件来源已经按照我希望它们出现的正确顺序排列了事件,但是完整的cal按字母顺序排序。我打开了fullcalendar.js文件并注释掉了所有实例segs.sort(compareSegs);这解决了我的问题并允许我的事件按照它们在我的事件源JSON对象中发生的顺序显示。我不确定这是否打破了任何其他功能,但对于我的应用程序,这工作完美。