Question

我有这种情况。我需要使用fullCalendar 3.8来显示一些保留。我有后端，以JSON格式给我数据（我有大约10个字段）在前端，我有一个包含fullcalendar，moment和jquery的JSP。我需要填充我的FullCalendar。示例我拥有的Json是这种形式：

[
{
    "idReservation": 21,
    "idUser": 2,
    "idSale": 1,
    "timeStart": 1513839600000,
    "timeEnd": 1513850400000
},
{
    "idReservation": 22,
    "idUser": 1,
    "idSale": 1,
    "timeStart": 1513854000000,
    "timeEnd": 1513857600000
} ]

有人可以告诉我在哪里可以开始学习，用这些数据为我的日历提供测试吗？我试着阅读很多文章，但因为我不是前端开发人员，我不知所措：）

我创建的Javascript代码就是这个：

$(document).ready(function() {
  var value=2;
  returnReservationsCalendar(value);
  });

  function returnReservationsCalendar(value){
        var serviceEndpoint = 
    'http://localhost:8080/sale/'+value+'/reservations';
        $.ajax({
            type : 'GET',
            url: serviceEndpoint,
            dataType: 'json',
            contentType : 'application/json',
            success: function (result) {
                $('#calendar').fullCalendar({                       
                    header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay'
                        },          
                    defaultDate: '2014-11-13',
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events

                events: function (start, end, timezone, callback) {
                var events = [];
                $.each(result, function (index) {
                     events.push({
                      "title": "Event " + index,
                      "start": result[index].timeStart.toISOString(),
                      "end": result[index].timeEnd.toISOString(),
                     });
                });
                callback(events);               
                }
             });
            },
    error: function () { alert('Failed!'); }
});
}

在JSP上我只有这个代码：

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

问题是我有来自ajax的json响应，但我不明白我在哪里犯了关于用json中的数据填充日历的错误。

Answer 1

您应该在浏览器的控制台中看到与此类似的错误（这与Google Chrome相同，其他可能略有不同）：

未捕获的TypeError：result [index] .timeStart.toISOString不是功能

这只是因为timeStart是来自JSON的字符串，而不是momentJS或Date对象。

在此之前，你需要通过momentJS构造函数传递它：

events.push({
  "title": "Event " + index,
  "start": moment(result[index].timeStart).toISOString(),
  "end": moment(result[index].timeEnd).toISOString(),
});

请参阅http://jsfiddle.net/sbxpv25p/166/了解工作演示（使用静态事件列表而不是ajax，但它演示了与此答案相关的部分。

包含JSON的完整日历Feed（从restfull webservice获取数据）

1 个答案: