Detecting when a schedule item has moved with AlloyUI Scheduler - 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>