javascript - 使用 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"
         }
      ]
   ]
}

我的事件中的日期与日期无关。然而，他们确实有两个 key :

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..
            }]
        });

这是每周 View 的 JSFiddle:

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

Answer 1

由于您获得的日期为单个字母，即周一、周三、周五的 MWF，我建议您创建一个全局数据集 并在 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 失败了。他发现新版本需要一个额外的参数，即时区，更新后它工作正常。