fullcalendarのschedulerのタイムラインに複数のeventが表示されないようにしたい。

Question

fullcalendarのschedulerを使用しています。

event.id が ひとつに対し、ResourceのIDが複数あります。
ResourceのIDが10個の場合、eventResizeを実行すると、
eventResizeを実行したResourceのタイムラインのセルに、10個のイベントが表示されてしまいます。

現在は、以下の方法で回避しています。

①$('#calendar').fullCalendar("removeEvents", event.id) でeventを削除。
↑ひとつのタイムラインにeventが複数表示されないように
②eventResizeを実行していいか確認ダイアログを表示。
②ダイアログＯＫ→保存処理実行、いいえ→リロード
④保存処理成功→eventRenderで保存したデータを反映、失敗→リロード

$('#calendar').fullCalendar("removeEvents", event.id) でeventを削除しているので、保存処理が失敗した場合や確認処理でキャンセルした場合、revertFuncがききません。

eventResize前の情報を取得できれば、eventRenderで、再表示も考えましたが、
eventResizeStartで、evetResize前のeventが拾えませんでした。

処理が失敗したとき、キャンセルが押されたときに、できればリロードしたくないので（処理失敗やキャンセルはrevertFuncを使いたい）、ひとつのタイムラインに、eventがたくさん表示されてしまう現象を、回避させる方法があれば、教えていただきたいです。

eventResizeStop: function (event, jsEvent, ui, view) {
    // リソースIDを取得する
    resourceIdArray = [];
    var clientEvent = $('#calendar').fullCalendar('clientEvents', event.id);

    $.each(clientEvent, function() {
        resourceIdArray.push(this.resourceId);
    });
},
eventResize: function (event, dayDelta, revertFunc, jsEvent, ui, view) {

    var currentEvnet = event;
    var clientEvent = $('#calendar').fullCalendar('clientEvents', event.id);

    // fullcalendarからイベントを削除 ↓ほんとは、ここで削除したくない。
    $('#calendar').fullCalendar("removeEvents", event.id)

    // イベントIDに複数のリソースがあれば確認メッセージダイアログを表示する。
    if (clientEvent[0].kiki_no > 1) {
        $.confirm()
            .done(function () {
                // 保存処理実行
                ExecEventResize(currentEvnet, dayDelta, revertFunc,jsEvent, ui, view);
            })
            .fail(function () {
                //revertFunc();←これをやりたい。

                // removeEventでイベントを消してしまっているのでrevertFuncが効かない。
                // 確認ダイアログの前にremoveEventしないと、リソースイベントが１つのタイムラインに表示されてしまう。
                // revertFuncの代わりにrenderEventは、eventResizeの前のイベントがeventResizeStartでも拾えないのでムリ。
                pageReload();
                return;
            });
        return;
    }

    // 保存処理実行
    ExecEventResize(event, dayDelta, revertFunc, jsEvent, ui, view);
},

宜しくお願いします。

Answer 1

自己解決しました。

eventResizeStart で、リサイズ前の日付（end）を取得できました。

eventResizeStart: function( event, jsEvent, ui, view ) {
    event.prevStart = event.start;
    event.prevEnd = event.end;
},
eventResizeStop: function (event, jsEvent, ui, view) {
    resourceIdAry = [];
    var clientEvent = $('#group_calendar').fullCalendar('clientEvents', event.id);
    $.each(clientEvent, function() {
        resourceIdAry.push(this.resourceId);
    });
},
eventResize: function (event, dayDelta, revertFunc, jsEvent, ui, view) {

    var ev = event;
    $('#calendar').fullCalendar("removeEvents", event.id);

    AjaxSave("xxxx").done(function (result) {
        if (result.ReturnCode != 0) {
            $.each(resourceIdAry, function () {
                var item = {
                    resourceId: this,
                    id: ev.id,
                    allDay: ev.allDay,
                    :
                    start:  ev.prevStart,
                    end: ev.prevEnd,
                }
                $('#calendar').fullCalendar('renderEvent', item, 'stick');
            });
  :
  :
},