jquery - FullCalendar Control MVC jQuery - 複数のカレンダーが作成されています

Question

Adam Shaw が提供するFullCalendarコントロールの実装を検討しており、デフォルトを設定して、MVC コントロールで JSONResult を使用してイベントをロードすることができました。

JavaScript に配線した DropDownList があります.change。ユーザーがドロップダウンからアイテムを選択すると、ドロップダウンの選択に基づいてカレンダーイベントをリロードしたいと思います。

私が抱えている問題は、選択したドロップダウン項目が変更されるたびにカレンダーが作成されることです。したがって、ドロップダウンの選択が 3 回変更されると、最終的に 3 つのカレンダーになります。

これ$('#calendar').fullCalendarは、別のカレンダーを作成するように設計されているために発生します。しかし、同じカレンダーを使用して、ドロップダウンで選択した項目に基づいてイベントをリロードするにはどうすればよいですか?

MVC コントローラーの JsonResult

public JsonResult CALStationDayLoad(int AppID)
        {

            var events = SL_db.SLGetStationLogFuture(null,AppID);
            var eventList = from e in events
                            select new
                            {
                                id = e.ID,
                                title = e.ShortDesc,
                                start = e.StartTime.ToString("s"),
                                end = e.EndTime.ToString("s"),
                                allDay = false
                            };

          return Json(eventList, JsonRequestBehavior.AllowGet);
        }

---

これがjQueryです...

<script>
    $(document).ready(function () {
        $("#AppID").change(function () {
            var e = document.getElementById("AppID");
            var selectedApp = e.options[e.selectedIndex].value;
           GetEvents(selectedApp);
         });
    });

    function GetEvents(AppID) {
        //console.log(AppID);
        $('#calendar').fullCalendar({
            theme: false,
            header: {
                left: '',
                center: '',
                right: ''
            },
            defaultView: 'agendaDay',
            editable: false,
            events: {
                url: '/AppPreventativeMaintenance/CALStationDayLoad/',
                type: 'POST',
                data: {
                    AppID: AppID
                },
                error: function () {
                    alert('there was an error while fetching events!');
                },
                //color: 'yellow',   // a non-ajax option
                //textColor: 'black' // a non-ajax option
            }

        });
    };

</script>