【问题标题】:Does Fullcalendar support custom sorting for all day eventsFullcalendar 是否支持对全天事件进行自定义排序
【发布时间】:2015-01-12 22:55:35
【问题描述】:

我一直在研究早期的问题,例如 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");

这种方法我也没有成功。

更新

我突然想到,由于排序顺序默认使用标题,那么可以通过在标题前添加一个空格来实现相同的效果,这将强制正确的顺序。渲染日历时,不会显示空格。这种变通方法可能是唯一的办法,尽管我更喜欢添加一分钟而不是添加空格。

【问题讨论】:

  • 添加一分钟无济于事,因为由于设置了 allDay 标志,fullcalender 可能会忽略时间。就像它会忽略结束时间一样
  • 您是否遇到过需要使用标题以外的其他数据进行排序的情况?
  • 不...如果间距技巧不起作用或您需要更好的控制,我会考虑修改源代码以达到您的目的。
  • 仅供参考,间距技巧对我有用(FullCalendar v 2.3.1。)

标签: javascript fullcalendar momentjs


【解决方案1】:

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

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

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

【讨论】:

    【解决方案2】:

    如果您想完全覆盖 allDaySlot、月份、基本视图的按开始日期排序。 例如按颜色排序。

    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
    

    【讨论】:

    • 编辑完成,我删除了链接,然后我复制/粘贴了我的帖子。我根本没有足够的声誉来做到这一点。名声真的好难
    【解决方案3】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-10-30
      • 1970-01-01
      • 1970-01-01
      • 2011-03-28
      • 2012-02-18
      • 2011-02-06
      • 2011-01-13
      • 2019-09-17
      相关资源
      最近更新 更多