JSON Won't get events in Full Calendar from URL

Question

We're trying to load our events to Full Calendar from a URL, but the events won't load. I've included th JS below, as well the JSON response from our URL/API.
Thanks so much!

URL/API JSON Response:

[{"start":"2016-04-012T15:30:00","end":"2016-04-12T16:30:00","title":"Calendar 1","allDay":"false","id":"a41380d1fbbaa819"}]

JS:

$(document).ready(function() {

    $('#calendar').fullCalendar({
        //theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: moment().format("YYYY-MM-DD"),
        editable: true,
        events: {
            url: 'MY URL, I DIDN\'T POST IT HERE TO KEEP IT PRIVATE',
            error: function() {
                $('#script-warning').show();
            },
            success: function(){
                alert("successful: You can now do your stuff here. You dont need ajax. Full Calendar will do the ajax call OK? ");   
            }
        },
        loading: function(bool) {
            $('#loading').toggle(bool);
        }
    });

});

maybe because you're entering 'URL' when you should be entering the **actual** URL where you're getting your JSON from... — Joum, Apr 12 '16 at 15:35
Thanks for the response! Haha, I just put that so my URL wouldn't be public. @Joum — IKid, Apr 12 '16 at 15:40
So, you're getting the JSON object back as a response when you call your URL? Does anything show up in your console? — Joum, Apr 12 '16 at 15:41
Yes, I get the JSON object back, it just won't show up on the calendar. I tried with a different URL and it did show the events on the calendar. I think it has to do with formatting but can't figure it out. Here is the other URL, http://www.json-generator.com/api/json/get/ccUKVDYErS?indent=2. Any ideas? Thanks! @Joum — IKid, Apr 12 '16 at 15:46
Check if your API response (in the browser inspector's network tab, for instance) has **Content-Type:application/json;charset=utf-8**... — Joum, Apr 12 '16 at 15:59

score 0 · Answer 1 · answered Apr 12 '16 at 16:18

The problem is the date format:

[{"start":"2016-04-012T15:30:00","end":"2016-04-12T16:30:00","title":"Calendar 1","allDay":"false","id":"a41380d1fbbaa819"}]

According to ISO_8601 the date "2016-04-012T15:30:00" must be changed in: "2016-04-12T15:30:00"

For more details see start parameter in Event_Object

score 0 · Accepted Answer · edited May 23 '17 at 11:50

0

Well, it was tricky to figure out but your JSON is indeed ill-formed.

Check out the "start" property in you object and see how the date is written - it's not a Date string.

You have this:

2016-04-012T15:30:00

should be :

2016-04-12T15:30:00

(note the highlight).

Also see this answer: Javascript object Vs JSON

Your problem seems to be having a JSON string when you need a Javascript object.

Also, see my JSBIN here to see what's happening.

edited May 23 '17 at 11:50

Community

1
1

answered Apr 12 '16 at 16:21

Joum

3,189
3
33
64

I changed the time, but it didn't fix it. You're saying I should add the start, end, and title as objects to my API instead of JSON strings, right? Thanks so much! – IKid Apr 12 '16 at 16:46
Yes, you should be careful with your date string as it isn't in the right format. What I'm saying regarding the response from your API is that it's sending back JSON, not object literals. This means you have to `JSON.parse()` your API response before using it in `fullcalendar` on your client. – Joum Apr 13 '16 at 11:18

JSON Won't get events in Full Calendar from URL

2 Answers2

Linked