title: Unable to store jqxScheduler state into MySQL using JSON
body: <p>I want to save jqxScheduler state into <code>MySQL</code>, please help me about what event I can use my requirement is to save the state of jqxScheduler into the database and reload it.</p>
  
  <p>Using the given code below, I am creating the jqxScheduler, I am able to load data into the schedule but how can I save it into the database to load it next time?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(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 = "&lt;img style='top: 2px; position: relative;' src='../../images/person.png'/&gt;";
          if (data.appointment.subject == "Nancy") {
            var img = "&lt;img style='top: 2px; position: relative;' src='../../images/woman.png'/&gt;";
  
          } else if (data.appointment.subject == "Peter") {
            var img = "&lt;img style='top: 2px; position: relative;' src='../../images/boss.png'/&gt;";
          } else if (data.appointment.subject == "Antony") {
            var img = "&lt;img style='top: 2px; position: relative;' src='../../images/oldboss.png'/&gt;";
          } else if (data.appointment.subject == "John") {
            var img = "&lt;img style='top: 2px; position: relative;' src='../../images/asian.png'/&gt;";
          }
          if (data.view == "weekView" || data.view == "dayView" || data.view == "monthView") {
            data.html = img + "&lt;i&gt;" + data.appointment.subject + "&lt;/i&gt;";
            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'
        ]
      });
    });
  &lt;/script&gt;
  </code></pre>