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

Handling date-agnostic events with Moment.js and FullCalendar

本文关键字：事件 日期 处理 Moment js FullCalendar 使用      更新时间：2023-09-26

我正在尝试使用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/

由于您获得的日期为单个字母，即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

编辑:我不会单独邀功。我使用addEventSource方法与3个参数，因为我的fullCalendar版本是旧的，这是失败的@theGreenCabbage。他发现新版本使用了一个额外的参数，即timezone，更新后它可以正常工作。

相关文章：