Eventos en fullcalendar no se muestran JS

Es la primera vez que trabajo con FullCalendar y tengo problemas para mostrar los eventos ( código abajo ), les agradecería una ayuda.

archivo fullcalendar-init.js

!function($) {
    "use strict";
    var CalendarApp = function() {
        this.$body = $("body")
        this.$modal = $('#event-modal'),
        this.$event = ('#external-events div.external-event'),
        this.$calendar = $('#calendar'),
        this.$saveCategoryBtn = $('.save-category'),
        this.$categoryForm = $('#add-category form'),
        this.$extEvents = $('#external-events'),
        this.$calendarObj = null
    };
    /* Initializing */
    CalendarApp.prototype.init = function() {
        var $this = this;
        $this.$calendarObj = $this.$calendar.fullCalendar({
            DefaultView: 'month', 
            HandleWindowResize: true, 
            height: $(window). Height() - 200, 
            header: {
                left: 'prev, next today',
                Center: 'title',
                Right: 'month, agendaWeek, agendaDay'
            },
            events: 'data.php',
            EventLimit: false,
            Selectable: true,
        });
    },
   //init CalendarApp
    $.CalendarApp = new CalendarApp, $.CalendarApp.Constructor = CalendarApp
}(window.jQuery),
//initializing CalendarApp
function($) {
    "use strict";
    $.CalendarApp.init()
}(window.jQuery);

archivo data.php

<?php
//load.php
$connect = new PDO('mysql:host=localhost;dbname=sistema', 'root', '');
$data = array();
$query = "SELECT * FROM booking";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
 $data[] = array(
  'id'   => $row["idbooking"],
  'title'   => $row["fullname"],
  'start'   => $row["departuredate"],
  'end'   => $row["returndate"]
 );
}
echo json_encode($data);
?>

El archivo data.php se encuentra en las misma ruta que el fullcalendar-init.js