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

Question

我是使用AlloyUI Scheduler的新手。我已经找到了如何保存，编辑或删除项目时如何显示警报但我似乎无法找到如何移动项目时显示警报，即移动到另一个时间或日期。我本以为'编辑'事件会处理这个，但显然不是。这是我的代码。

 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>