3

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.

$(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:

[Object]
allDay: "false"
end: "1392129000"
id: "[email protected]"
room: "Sh1"
start: "1392127200"
title: "Phil - Google"
__proto__: Object
length: 1
__proto__: Array[0]
1
  • I'm glad you found solution what did it end up being? Feb 12, 2014 at 15:46

1 Answer 1

4

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

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

Fullcalendar defaults the dataType as JSON and caching to false.

Combined some of your code with code from 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

     events: [
     {
            end: 1392129000,
            id: "[email protected]",
            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;
    }
    }]
...
9
  • I tried this as well, but it didn't work. I updated the question with the code from this approach
    – erythraios
    Feb 11, 2014 at 16:49
  • Can you provide an example of the json your url returns? Feb 11, 2014 at 17:14
  • I see one issue with your allDay value that is "false" and not just false. Feb 11, 2014 at 17:25
  • I've removed that field entirely now, issue persists
    – erythraios
    Feb 11, 2014 at 17:28
  • I may have located the problem -- when I POST the object, it returns to the client with all the values converted to strings (even the date objects) which I think is not allowing it to render. Is there a way to prevent the POST operation from doing this?
    – erythraios
    Feb 11, 2014 at 18:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.