FullCalendar integration with Joomla component by JSON

Question

I try to integrate FullCalendar with my Joomla component. I wrote my json feed in controller:

public function getAvails()
{
    $app        = JFactory::getApplication();
    $document   = JFactory::getDocument();

    $admin_id = $app->input->get('admin_id');
    $place_id = $app->input->get('place_id');

    $model = $this->getModel('Avails');
    $model->setState('filter.admin_id', $admin_id);
    $model->setState('filter.place_id', $place_id);
    $items = $model->getItems();

    $document->setMimeEncoding('application/json');
    JResponse::setHeader('Content-   Disposition','attachment;filename="result.json"');

    echo json_encode($items);
    exit;
}

Which results JSON:

[
    {
        "id": "1",
        "title": "Spotkanie z: 0 Miejsce:  Bergen",
        "start": "2015-06-10",
        "end": "2015-06-10",
        "color": ""
    },
    {
        "id": "2",
        "title": "Spotkanie z: 0 Miejsce:  Oslo",
        "start": "2015-06-17",
        "end": "2015-06-17",
        "color": "#17cce8"
    },
    {
        "id": "3",
        "title": "Spotkanie z: 0 Miejsce:  Oslo",
        "start": "2015-06-29",
        "end": "2015-06-29",
        "color": "#17cce8"
    }
]

My javascript code:

jQuery(document).ready(function() {
    jQuery.ajax({
        url: 'index.php?option=com_meetings&task=avails.getavails&format=json',
        type: 'POST',
        async: false,  
        success: function(response){ 
            json_events = response;
        }
    });

    // page is now ready, initialize the calendar...
    alert(json_events);
    jQuery('#calendar').fullCalendar({      
        events: json_events,
        header: {
            left: 'prev,next today',
            center: 'title',
                right: 'month,agendaWeek,agendaDay'
            }
        })
    });
});

And it doesnt give any results in FullCalendar. However if I assign my json results directly to events instead of json_events variable in fullCalendar function it works!

What am I doing wrong?
Is it something wrong with my JSON?
It is validating ok.

Answer 1

You need to put your full calendar code in ajax success portion as full calendar code call before response of ajax

  jQuery(document).ready(function() {
        jQuery.ajax({
            url: 'index.php?option=com_meetings&task=avails.getavails&format=json',
            type: 'POST',
            async: false,  
            success: function(response){ 
                json_events = response;

                // page is now ready, initialize the calendar...
            alert(json_events);
          jQuery('#calendar').fullCalendar({      
            events: json_events,
            header: {
                left: 'prev,next today',
                center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                }
            })
           });
        }
    });


});

Answer 2

JSON result was ok and the problem was with file format. In my editor in file encoding properties it was checked - utf-8 with BOM sygnature... I unchecked and it started working... BOM sygnature seems to break JSON file.