FullCalendar IO not showing Database Results - php

Question

I want to implement a calendar option that can be able to show the list of events in a specific day. I query my results from the Database and it comes as a JSON format below :
[
{
title: "No of Appointments : 48",
START: "1970-01-01"
},
{
title: "No of Appointments : 2",
START: "2017-06-14"
},
{
title: "No of Appointments : 2",
START: "2017-06-15"
},
{
title: "No of Appointments : 1",
START: "2017-06-20"
},
{
title: "No of Appointments : 1",
START: "2017-06-21"
}
]
And my jquery file is as below :
var cal = jQuery.noConflict();
cal(document).ready(function () {
function get_data() {
cal.ajax({
url: "<?php echo base_url(); ?>Reports/get_count_apointments/",
type: 'GET',
dataType: 'JSON',
success: function (data) {
var appointment_info = data;
draw_calendar(appointment_info);
}, error: function (jqXHR) {
console.log(jqXHR);
}
});
}
get_data();
function draw_calendar(appointment_info) {
cal('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: appointment_info
});
}
});
However the following opens the calendar with no marked event date.
Hence a blank page with no event on a specific date.
How can I solve this issue?