如何使用fullcalendar.js从静态JSON文件加载日历事件

时间:2014-09-10 03:25:48

标签: jquery fullcalendar

我正在使用FullCalendar.js库来呈现来自静态JSON文件的事件,该文件位于同一文件夹中。我已经编写了如下代码,请帮助我。

HTML代码

 <div id="calendar"> </div> 

jQuery代码

$(document).ready(function(){
    $('#calendar').fullCalendar({
        header: {
            left: '',
            center: 'prev,title,next',
            right: 'month,agendaWeek,agendaDay'
        },
        events: function (start, end, timezone, callback) {
            $.ajax({
                url: 'static-calendar-events.json',
                type: "GET",
                datatype: 'json',
                success: function (doc) {
                    var events = [];
                    if ($(doc) != undefined && $(doc).Events.length > 0) {
                        $(doc).Events.forEach(function (Obj) {
                            events.push({
                                title: Obj.Title,
                                start: Obj.Start,
                                end: Obj.End
                            });

                        });
                    }
                    callback(events);
                },error: function (err) {
                    alert('Error in fetching data');
                }
            });
        },
        defaultView: 'agendaWeek',
        eventClick: function (calEvent, jsEvent, view) {
            alert(calEvent.title);
        }
    });
});

静态JSON文件

[
    {
        "title": "Calendar Test",
        "start": "2014-06-01 18:30:00",
        "end": "2014-06-01 19:00:00",
        "allDay": false
    },
    {
        "title": "Calendar Test 1",
        "start": "2014-06-02 18:30:00",
        "end": "2014-06-02 19:00:00",
        "allDay": false
    },
    {
        "title": "Calendar Test 2",
        "start": "2014-06-03 18:30:00",
        "end": "2014-06-03 19:00:00",
        "allDay": false
    }
]

当我运行上面的代码时,它会给我一个错误,因为&#39;回调未定义&#39;最初它给我带来错误,因为在获取数据时出错了#39;我是通过Web服务器运行的。

1 个答案:

答案 0 :(得分:2)

您在JSON文件中没有超级对象Events,因此每个文档条目都是doc.titledoc.start等。此外,没有必要访问{{ 1}}作为jQuery对象。

doc