使用 AlloyUI Scheduler 检测计划项目何时移动

Question

我是 AlloyUI 调度程序的新手。我已经找到如何在项目被保存、编辑或删除时显示警报，但我似乎无法找到如何在项目移动时显示警报，即移动到另一个时间或日期。我原以为 'edit' 事件会处理这个问题，但显然没有。这是我的代码。

 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]
            }
        );

我试过了:-

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

但是没用

Answer 1

对于每个视图，您需要监听每个视图的 after drag:end 事件。遗憾的是，此事件不提供拖动的SchedulerEvent，因此您需要为每个视图以适当的方式获取它：

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);
}

只需在每个视图的 after drag:end 事件中使用上述函数，您就可以获得拖动事件的新开始和结束日期。

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]
    });
});

可运行示例：

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

使用 AlloyUI Scheduler 检测计划项目何时移动

Detecting when a schedule item has moved with AlloyUI Scheduler

scheduler

alloy-ui