FullCalendar 2.1.1 not displaying events

Question

I have configured FullCalendar version 2.1.1 in my application, but it simply does not show the events, i googled a lot, but was not able to solve the problem.

Here is my code:

$("#fullcalendar").fullCalendar({
    "allDayDefault": false
    , "allDaySlot": false
    , "defaultView": "agendaWeek"
    , "editable": true
    , "eventClick": function(event, jsEvent, view) {
        $("#data_inicial_evento").val(event.start.format("DD/MM/YYYY"));
        $("#hora_inicial_evento").val(event.start.format("HH:mm"));

        if (event.end) {
            $("#data_final_evento").val(event.end.format("DD/MM/YYYY"));
            $("#hora_final_evento").val(event.end.format("HH:mm"));
        } else {
            $("#data_final_evento").val(event.start.format("DD/MM/YYYY"));
            $("#hora_final_evento").val(event.start.format("HH:mm"));
        }

        $("#titulo_evento").val(event.title);
        $("#categoria_evento").val(event.categoria);
        $("#form_editar_evento").attr("action", "{{ baseRoute }}/cadastro/evento/editar/" + event.id);
        $("#apagar_evento").attr("data-idEvento", event.id);
        $("#conteiner_form_editar_evento").dialog("open");
    }
    , "eventDrop": function(event, delta, revertFunc, jsEvent, ui, view) {
        $.post(
            "{{ baseRoute }}/cadastro/evento/alterarEventoAjaxUI"
            , {
                "idEvento": event.id
                , "dayDelta": delta.asDays()
                , "minuteDelta": delta.asMinutes()
                , "evento": "dragndrop"
            }
        ).done(function(data) {
            var obj = $.parseJSON(data);
            if (!obj.result) {
                revertFunc();
            }
        }).fail(function() {
            revertFunc();
        });
    }
    , "eventResize": function(event, delta, revertFunc, jsEvent, ui, view) {
        $.post(
            "{{ baseRoute }}/cadastro/evento/alterarEventoAjaxUI"
            , {
                "idEvento": event.id
                , "dayDelta": delta.asDays()
                , "minuteDelta": delta.asMinutes()
                , "evento": "resize"
            }
        ).done(function(data) {
            var obj = $.parseJSON(data);
            if (!obj.result) {
                revertFunc();
            }
        }).fail(function() {
            revertFunc();
        });
    }
    , "events": "{{ baseRoute }}/cadastro/evento/listarEventosAjaxUI"
    , "header": {
        "left": "prev,next today"
        , "center": "title"
        , "right": "month,agendaWeek,agendaDay"
    }
    , "select": function(start, end, jsEvent, view) {
        var dataEvento;

        // se for um evento de dia inteiro
        if (view.name === "month") {
            if (end.diff(start, 'days') > 1) {
                dataEvento = start.format("dddd, DD/MM/YYYY") + " ";
                dataEvento += "<br />até<br />";
                dataEvento += end.clone().subtract(1, 'days').format("dddd, DD/MM/YYYY");
            } else {
                dataEvento = start.format("dddd, DD/MM/YYYY");
            }
        } else {
            dataEvento = start.format("dddd, DD/MM/YYYY HH:mm") + " - ";
            dataEvento += end.format("HH:mm");
        }

        $("#data_inicial_novo_evento").val(start.format("DD/MM/YYYY"));
        $("#hora_inicial_novo_evento").val(start.format("HH:mm"));
        $("#data_final_novo_evento").val(end.format("DD/MM/YYYY"));
        $("#hora_final_novo_evento").val(end.format("HH:MM"));
        $("#span_data_novo_evento").html(dataEvento);
        $("#conteiner_form_novo_evento").dialog("open");
    }
    , "selectHelper": true
    , "selectable": true
    , "timezone": "local"
});

and here is how i am getting the events data from my json source:

[
    {
        "title":"agendas"
        ,"start":1407409200
        ,"end":1407416400
        ,"id":16
        ,"allDay":false
        ,"usuario":"anderson"
        ,"categoria":13
    }
    ,{
        "title":"culto"
        ,"start":1407085200
        ,"end":1407094200
        ,"id":17
        ,"allDay":false
        ,"usuario":"anderson"
        ,"categoria":9
    }
    // and so on...
]

i really can't figure out what is wrong :(

Answer 1

Your start and end parameters are timestamps. FullCalendar documentation of startParam states:

A parameter of this name will be sent to each JSON event feed. It describes the start of the interval being fetched.

String, default: 'start'

The actual value of this parameter will be an ISO8601 date string.

Wikipedia has detailed information about ISO 8601, so your params should have one of the following formats:

1. 2014-09-22
2. 2014-09-22 15:00:00
3. 2014-09-21T13:00:00Z