Unable to store jqxScheduler state into MySQL using JSON

Question

I want to save jqxScheduler state into MySQL , please help me about what event I can use my requirement is to save the state of jqxScheduler into the database and reload it.

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?

<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>

Answer 1

you can use this function :

                    $('#scheduler').on('appointmentChange appointmentAdd', function (event) { 
                            // lors de la sauvegarde
                            var args = event.args; 
                            var appointment = args.appointment.jqxAppointment; 
                            var pId=appointment.id;
                            var pIdStr=pId.toString();
                            var title=appointment.subject;
                            var description=appointment.description;
                            var start=appointment.from.toString();
                            var end=appointment.to.toString();
                            var background=appointment.background;
                            var borderColor=appointment.borderColor;
                            var color=appointment.color;
                            var draggable="false";
                            var resizable="false";
                            var readOnly="false";
                            var done=0;
                            var pProg="update_action.php";

                            if (title===null) title="Sans Titre";
                            if (background===null) background=defaultBackground;
                            if (borderColor===null) borderColor=defaultBorderColor;
                            if (pIdStr.length>10) {pProg="add_action.php";}


                            console.log(args.appointment);
                            console.log(start);
                            console.log(end);
                            console.log(pProg);
                            console.log(UrlTache);


                                $.post(
                                    pProg,
                                    {
                                            pId : pId,
                                            title : title,
                                            description : description,
                                            start : start,
                                            end : end,
                                            color : color,
                                            background : background,
                                            borderColor : borderColor,
                                            draggable : draggable,
                                            resizable : resizable,
                                            readOnly : readOnly,
                                            UrlTache : UrlTache,
                                            done : done
                                        },
                                        fRetour_AddAction,
                                        'text'
                                    );
                    });