FullCalendar：最初不是从函数调用（AJAX）呈现的事件

I've configured my FullCalendar to pull its events from an AJAX request, but they don't render on the calendar when the page is first loaded.

我已将FullCalendar配置为从AJAX请求中提取其事件,但在首次加载页面时,它们不会在日历上呈现。

$(document).ready(function() {

    sh1client = new Array();
    sh2client = new Array();

    $('#sh1_cal').fullCalendar({

         height: 1000,
         minTime:'9:00am',
         maxTime:'5:00pm',
         editable: false,

         events: function(start, end, callback) {

            $.ajax({
                type: 'GET',
                url: 'http://localhost:8080/getEvents',
                dataType: 'json',
                success: function(reply) {

                    console.log(reply.first);
                    callback(reply.first);

                }
            });
        }
    });


    $("#sh1_cal").fullCalendar('addEventSource', sh1client);   // these are the clientside arrays

});

And on the server,

在服务器上,

app.get('/getEvents', function(req, res){

    console.log('Server: passing events...');

    var arrays = {first: sh1, second: sh2}
    var pack = JSON.stringify(arrays)

    res.writeHead(200, {'Access-Control-Allow-Origin' : '*', 'Content-Type': 'application/json'});
    res.end(pack);

});

Is there any reason these events wouldn't initially load? Everything seems to be being passed through alright, but it's like the callback isn't working or something.

是否有任何原因这些事件最初不会加载?一切似乎正在通过,但它就像回调不起作用或其他东西。

EDIT: Here is another approach I tried

编辑:这是我尝试的另一种方法

events: { 

            url: 'http://localhost:8080/getEvents',
            type: 'GET',

            error: function() {
                alert('there was an error while fetching events!');
            },

            success: function(reply) {
                console.log(reply);
                //callback(reply.first);
            },

            color: 'yellow',   // a non-ajax option
            textColor: 'black' // a non-ajax option

         }

EDIT: JavaScript console shows this as being POSTed to the page as soon as it loads (this is the first object in an array:

编辑:JavaScript控制台显示了此为被只要它加载(这是在阵列中的第一个对象发布到页:

[Object]
allDay: "false"
end: "1392129000"
id: "phil@google.com"
room: "Sh1"
start: "1392127200"
title: "Phil - Google"
__proto__: Object
length: 1
__proto__: Array[0]

1 个解决方案

#1

Instead of using your own ajax call, have you tried using fullcalendars?

您是否尝试过使用fullcalendars而不是使用自己的ajax调用?

http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/

Fullcalendar defaults the dataType as JSON and caching to false.

Fullcalendar将dataType默认为JSON并将缓存默认为false。

Combined some of your code with code from doc:

将部分代码与doc中的代码结合使用:

$('#calendar').fullCalendar({

    events: {
        url: 'http://localhost:8080/getEvents',
        type: 'GET',
        error: function() {
            alert('there was an error while fetching events!');
        },
        success: function(reply) {
            console.log(reply.first);
            callback(reply.first);
        },
        color: 'yellow',   // a non-ajax option
        textColor: 'black' // a non-ajax option
    }

});

You can try just getting your JSON string cutting and pasting in and see if you can render without ajax call

您可以尝试只是将JSON字符串剪切并粘贴,看看是否可以在没有ajax调用的情况下进行渲染

     events: [
     {
            end: 1392129000,
            id: "phil@google.com",
            room: "Sh1",
            start: 1392127200,
            title: "Phil - Google"
      }]

You can also process the response:

您还可以处理响应:

$('#myCalendar').fullCalendar({
...
   eventSources : [{
      url: 'myUrl',
      type: 'GET',
   },
   success: function(replyObject) {
      var results = [];
      var reply= replyObject.Results[0];
      for(var index in reply) {
         results.push(reply[index]);
      }
      return results;
    }
    }]
...

#1