Detecting when a schedule item has moved with AlloyUI Scheduler

Question

I'm new to using the AlloyUI Scheduler. I have found how to display an alert if a item is saved, edited or deleted but I can't seem to find out how to show an alert if the item is moved, ie moved to another time or day. I would have thought that the 'edit' event would have handled this but apparently not. This is the code I have.

 var eventRecorder = new Y.SchedulerEventRecorder({
            on: {
                save: function (event) {
                    alert('Save Event:');
                },
                edit: function (event) {
                    alert('Edit Event:');
                },
                delete: function (event) {
                    alert('Delete Event:');
                }
            }
        });


        var schedule = new Y.Scheduler(
            {
                boundingBox: '#myScheduler',
                date: new Date(2018, 7, 25),
                eventRecorder: eventRecorder,
                items: events,
                render: true,
                views: [dayView, weekView, monthView, agendaView]
            }
        );

I did try :-

Moved: function (event) {alert('Moved');}

But it didn't work

Answer 1

For each view you'll need to listen to the after drag:end event for each view. Unfortunately, this event doesn't provide the dragged SchedulerEvent, so you'll need to obtain it in an appropriate way for each view:

function afterEventMoved(event, scheduler) {

    var startDate;
    var endDate;

    // Obtain the new start and end dates in the month view.
    if (event.currentTarget.originalDragNode) {
        var eventNodeId = event.currentTarget.originalDragNode.get('id');
        var eventsArray = scheduler.getEvents();
        var movedEvent = null;
        for (var i = 0; i < eventsArray.length; i++) {

            if (eventNodeId === eventsArray[i].get('node').get('id')[0]) {
                movedEvent = eventsArray[i];
                break;
            }
        }

        startDate = movedEvent.get('startDate');
        endDate = movedEvent.get('endDate');
    }

    // Obtain the new start and end dates in the day and week views.

    // Unfortunately, there seems to be a bug and the time of these dates
    // seems to be incorrect (it seems to be the time before the event was dragged).
    // The day, month, and year seem to be correct though.
    else {
        startDate = event.currentTarget.draggingEventStartDate;
        endDate = event.currentTarget.draggingEventEndDate;
    }

    console.log(startDate);
    console.log(endDate);
}

Just use a function like the one above during the after drag:end event for each view and you'll be able to obtain the new start and end dates of the dragged event.

YUI().use('aui-scheduler', function (Y) {

    var scheduler = null;
    var viewConfig = {
        after: {
            'drag:end': function(event) {
                afterEventMoved(event, scheduler);
            }
        }
    };
    var agendaView = new Y.SchedulerAgendaView();
    var dayView = new Y.SchedulerDayView(viewConfig);
    var monthView = new Y.SchedulerMonthView(viewConfig);
    var weekView = new Y.SchedulerWeekView(viewConfig);

    var eventRecorder = new Y.SchedulerEventRecorder();

    var events = [ /* ...your events here... */ ];

    scheduler = new Y.Scheduler({
        activeView: monthView,
        boundingBox: '#myScheduler',
        date: new Date(2013, 1, 4),
        eventRecorder: eventRecorder,
        items: events,
        render: true,
        views: [dayView, weekView, monthView, agendaView]
    });
});

Runnable example:

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<script type="text/javascript">

 function afterEventMoved(event, scheduler) {

  var startDate;
  var endDate;

  if (event.currentTarget.originalDragNode) {
   var eventNodeId = event.currentTarget.originalDragNode.get('id');
   var eventsArray = scheduler.getEvents();
   var movedEvent = null;
   for (var i = 0; i < eventsArray.length; i++) {

    if (eventNodeId === eventsArray[i].get('node').get('id')[0]) {
     movedEvent = eventsArray[i];
     break;
    }
   }

   startDate = movedEvent.get('startDate');
   endDate = movedEvent.get('endDate');
  }
  else {
   startDate = event.currentTarget.draggingEventStartDate;
   endDate = event.currentTarget.draggingEventEndDate;
  }

  console.log(startDate);
  console.log(endDate);
 }

 YUI().use('aui-scheduler', function (Y) {

  var scheduler = null;
  var viewConfig = {
   after: {
    'drag:end': function(event) {
     afterEventMoved(event, scheduler);
    }
   }
  };
  var agendaView = new Y.SchedulerAgendaView();
  var dayView = new Y.SchedulerDayView(viewConfig);
  var monthView = new Y.SchedulerMonthView(viewConfig);
  var weekView = new Y.SchedulerWeekView(viewConfig);

  var eventRecorder = new Y.SchedulerEventRecorder();

  var events = [{
    content: 'AllDay',
    endDate: new Date(2013, 1, 5, 23, 59),
    startDate: new Date(2013, 1, 5, 0)
   },
   {
    color: '#8D8',
    content: 'Colorful',
    endDate: new Date(2013, 1, 6, 6),
    startDate: new Date(2013, 1, 6, 2)
   },
   {
    content: 'MultipleDays',
    endDate: new Date(2013, 1, 8),
    startDate: new Date(2013, 1, 4)
   },
   {
    content: 'Disabled',
    disabled: true,
    endDate: new Date(2013, 1, 8, 5),
    startDate: new Date(2013, 1, 8, 1)
   },
   {
    content: 'Meeting',
    endDate: new Date(2013, 1, 7, 7),
    meeting: true,
    startDate: new Date(2013, 1, 7, 3)
   },
   {
    color: '#88D',
    content: 'Overlap',
    endDate: new Date(2013, 1, 5, 4),
    startDate: new Date(2013, 1, 5, 1)
   },
   {
    content: 'Reminder',
    endDate: new Date(2013, 1, 4, 4),
    reminder: true,
    startDate: new Date(2013, 1, 4, 0)
   }
  ];

  scheduler = new Y.Scheduler({
   activeView: monthView,
   boundingBox: '#myScheduler',
   date: new Date(2013, 1, 4),
   eventRecorder: eventRecorder,
   items: events,
   render: true,
   views: [dayView, weekView, monthView, agendaView]
  });
 });
</script>