javascript — невозможно сохранить состояние jqxScheduler в MySQL с помощью JSON

Я хочу сохранить состояние jqxScheduler в MySQL, пожалуйста, помогите мне узнать, какое событие я могу использовать, мое требование — сохранить состояние jqxScheduler в базу данных и перезагрузить его.

Используя приведенный ниже код, я создаю jqxScheduler, я могу загрузить данные в расписание, но как я могу сохранить их в базе данных, чтобы загрузить их в следующий раз?

<script type="text/javascript">
$(document).ready(function() {
var appointments = new Array();
var appointment1 = {
id: "id1",
description: "Quarterly Project Review Meeting",
location: "",
student: "Nancy",
calendar: "Room 1",
start: new Date(2017, 10, 23, 9, 0, 0),
end: new Date(2017, 10, 23, 16, 0, 0)
}

appointments.push(appointment1);

// prepare the data
var source = {
dataType: "json",
dataFields: [
{name: 'id', type: 'string'},
{name: 'description', type: 'string'},
{name: 'location', type: 'string'},
{name: 'student', type: 'string'},
{name: 'calendar', type: 'string'},
{name: 'style', type: 'string'},
{name: 'color', type: 'string'},
{name: 'background', type: 'string'},
{name: 'borderColor', type: 'string'},
{name: 'start', type: 'date'},
{name: 'end', type: 'date'}
],
id: 'id',
localData: appointments,
url: "dsfasdfadsfasfasdfdata.php"};
var adapter = new $.jqx.dataAdapter(source);
$("#scheduler").jqxScheduler({
date: new $.jqx.date(2017, 11, 23),
width: getWidth("Scheduler"),
height: 600,
source: adapter,
renderAppointment: function(data) {
// data Object properties
// appointment - Object with the properties from the Scheduler.s source object.
// width - int
// height- int
// textColor - hex
// background - hex
// borderColor - hex
// style - string
// cssClass - string
// html - html string
// view - string
var img = "<img style='top: 2px; position: relative;' src='../../images/person.png'/>";
if (data.appointment.subject == "Nancy") {
var img = "<img style='top: 2px; position: relative;' src='../../images/woman.png'/>";

} else if (data.appointment.subject == "Peter") {
var img = "<img style='top: 2px; position: relative;' src='../../images/boss.png'/>";
} else if (data.appointment.subject == "Antony") {
var img = "<img style='top: 2px; position: relative;' src='../../images/oldboss.png'/>";
} else if (data.appointment.subject == "John") {
var img = "<img style='top: 2px; position: relative;' src='../../images/asian.png'/>";
}
if (data.view == "weekView" || data.view == "dayView" || data.view == "monthView") {
data.html = img + "<i>" + data.appointment.subject + "</i>";
if (data.appointment.id == "id1") {
data.style = "#AA4643";
} else if (data.appointment.id == "id2" || data.appointment.id == "id6") {
data.style = "#309B46";
} else if (data.appointment.id == "id3") {
data.style = "#447F6E";
}
}
return data;
},
changedAppointments: function(data) {
alert("here");
},
ready: function() {
$("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
var source = $('#scheduler').jqxScheduler('source');
console.log("here")
console.log(source._source.localData);
},
appointmentDataFields: {
from: "start",
to: "end",
id: "id",
description: "description",
location: "location",
subject: "student",
style: "style",
color: "color",
background: "background",
borderColor: "borderColor"},
view: 'weekView',
appointmentsMinHeight: 20,
views: [
'dayView',
'weekView',
'monthView'
]
});
});
</script>