drag event Scheduler event recorder

[Dimitris Kougioumtzis]

i have this code to implement scheduler event

i want to listen on drag event  to update via ajax the event to database


      function getCalendarEvent(evt) {
        try {
          var id = evt.get('id');
          $.ajax({
            url: "{% url 'get-event' %}",
            method: "GET",
            data: { pk : id},
            dataType: "json",
            success: function(response){
              var event = JSON.parse(response.event);
              $('#eventform  input[name="event-pk"]').val(event[0].pk).hide();
              $("#eventform  input[name=a-type][value=" + event[0].fields.type + "]").attr('checked', 'checked');
              $('#eventform  input[name="from_date"]').val(event[0].fields.from_date).hide();
              $('#eventform  input[name="to_date"]').val(event[0].fields.to_date).hide();
              $('#eventform  input[name="price"]').val(event[0].fields.price);
              $('#eventform  input[name="persons"]').val(event[0].fields.persons);
            }
          })
        }
        catch(err){
          console.log('new event');
        }

      }

      function getAvailability(){
        var items = [];
        $.ajax({
          url: "{% url 'get-availability' %}",
          method: "GET",
          data: { pk : "{{form.instance.pk}}" },
          dataType: "json",
          success: function(response){
            var data = JSON.parse(response.availability);
            for(var i=0;i<data.length;i++){
              items.push({
                id: data[i].pk,
                content: data[i].pk,
                endDate: new Date(data[i].fields.to_date),
                startDate: new Date(data[i].fields.from_date)
              });
            }
          }
        })
        return items;
      }
      var database_events = getAvailability();
      YUI().use(
        'aui-scheduler',
        function(Y) {
          var events = database_events;
          var agendaView = new Y.SchedulerAgendaView();
          var dayView = new Y.SchedulerDayView();
          var eventRecorder = new Y.SchedulerEventRecorder();
          var scheduleEvent = new Y.SchedulerEvent();
          var monthView = new Y.SchedulerMonthView();
          var weekView = new Y.SchedulerWeekView();
          var eventRecorder = new Y.SchedulerEventRecorder({
            headerTemplate: '',
            bodyTemplate: $('#eventform'),
            on: {
              save: function(event) {
                $('#eventform').submit();
                $("#eventform")[0].reset();
                getAvailability();
              },
              edit: function(event) {
                  $('#eventform').submit();
                  $("#eventform")[0].reset();
              },
              delete: function(event) {
                deleteEvent($('#eventform input[name="event-pk"]').val());
              },
              close: function(event) {
                $("#eventform")[0].reset();
              },
              change: function(event) {
                alert('change');
              },
              cancel: function(event) {
                $("#eventform")[0].reset();
              },
            }
          });
          var scheduleEvent = new Y.SchedulerEvent({
            on: {
              change: function(event) {
                alert('gfdggdffgf');
                $('#eventform').submit();
                $("#eventform")[0].reset();
                getAvailability();
              },
            }
          });

          Y.Do.before(function(e) {
            $("#eventform")[0].reset();
          }, eventRecorder, 'showPopover');

          Y.Do.after(function(e) {
            var start = this.getClearStartDate();
            var end = this.getClearEndDate();
            var evt = e.getData('scheduler-event');
            getCalendarEvent(evt);
            var raw_start_month = start.getMonth();
            var start_month = raw_start_month + 1;
            var raw_end_month = end.getMonth();
            var end_month = raw_end_month + 1;
            var start_date = start.getFullYear() + '-' +  start_month + "-" + start.getDate();
            var end_date = end.getFullYear() + '-' + end_month + "-" + end.getDate();
            $('#eventform input[name="from_date"]').val(start_date);
            $('#eventform input[name="to_date"]').val(end_date);
          }, eventRecorder, 'showPopover');
          new Y.Scheduler(
            {
              activeView: weekView,
              boundingBox: '#scheduler',
              date: new Date(2018, 1, 2),
              eventRecorder: eventRecorder,
              items: events,
              render: true,
              views: [dayView, weekView, monthView, agendaView]
            },
          );
        }
        // eventRecorder.move(function(e){
        //   alert('hi');
        // });
      );