使用 Moment.js 和 FullCalendar 处理与日期无关的事件

Question

我正在尝试使用 FullCalendar，因为它是一个相当先进和全面的库。

这是我的数据：

{
   "classes":[
      [
         {
            "name":"ECEC 301 Advanced Programming for Engineers Lecture",
            "days":"MWF",
            "times":"02:00 pm - 03:20 pm",
            "crn":"11215"
         },
         {
            "name":"ECEC 301 Advanced Programming for Engineers Lab",
            "days":"W",
            "times":"09:00 am - 10:50 am",
            "crn":"11216"
         }
      ]
   ]
}

我的活动中的日期与日期无关。但是他们确实有两个键：

days - 这些以 MTWRF 的格式出现，每个都是一周中每一天的字符

times - from 和 to

的时间跨度

我知道 Moment.js 库可以处理日期，但我完全不知道如何处理这种格式的日期。

这是我目前拥有的：

        $('#calendar').fullCalendar({
            editable: false,
            weekMode: 'liquid',
            handleWindowResize: true,
            weekends: false,
            defaultView: 'agendaWeek',

            events: [{
               // add JSON data here..
            }, {
               // add JSON data here..
            }]
        });

这是每周视图的 JSFiddle：

http://jsfiddle.net/pLodk6oz/1/

Answer 1

因为你得到的日子是单个字母，即 MWF 表示星期一、星期三、星期五，我建议你创建一个全局 dataset 并将其用于AddEventSource 事件

像这样声明全局数据集。

var myDataset = {
        "classes": [
            [{
                "name": "ECEC 301 Advanced Programming for Engineers Lecture",
                "days": "MWF",
                "times": "02:00 pm - 03:20 pm",
                "crn": "11215"
            }, {
                "name": "ECEC 301 Advanced Programming for Engineers Lab",
                "days": "W",
                "times": "09:00 am - 10:50 am",
                "crn": "11216"
            }],
            [{
                "name": "ECEC 301 Advanced Programming for Engineers Lecture",
                "days": "MWF",
                "times": "02:00 pm - 03:20 pm",
                "crn": "11215"
            }, {
                "name": "ECEC 301 Advanced Programming for Engineers Lab",
                "days": "F",
                "times": "02:00 pm - 03:50 pm",
                "crn": "11217"
            }]
        ]
    };

然后您可以使用 addEventSource 事件来设置您的自定义日期。

 $('#calendar').fullCalendar('addEventSource',
        function(start, end, timezone, callback) {

这是一个有效的 JSFIDDLE

编辑： 我不会独占功劳。我使用带有 3 个参数的 addEventSource 方法，因为我的 fullCalendar 版本很旧，@theGreenCabbage 失败了。他发现新版本采用了一个额外的参数，即 timezone 并且更新后它工作正常。

使用 Moment.js 和 FullCalendar 处理与日期无关的事件

Handling date-agnostic events with Moment.js and FullCalendar

javascript

jquery

fullcalendar

momentjs