正在创建多个日历

Question

我希望实现由Adam Shaw提供的FullCalendar控件，并且已经能够设置我的默认值并在我的MVC控件中使用JSONResult使用事件加载它。

我有一个下拉列表，我连接到JavaScript .change。当用户从下拉菜单中选择一个项目时，我希望根据下拉菜单重新加载日历事件。

我遇到的问题是，每次所选的下拉项更改时，都会创建一个日历;所以如果下拉选择改变了3次，我就会得到3个日历。

发生这种情况是因为$('#calendar').fullCalendar正在创建另一个日历，正如它被设计的那样。但是，如何让它使用相同的日历来根据下拉菜单中所选的项目重新加载事件呢?

我的JsonResult in My MVC Controller

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

---

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

Answer 1

基本上你要做的就是移动

$('#calendar').fullCalendar({
    ...
});

代码从onchange中取出并将其放入ready函数中。然后在你的onchange中你想要这样做…

var eventSource = {
    url: '/AppPreventativeMaintenance/CALStationDayLoad/',
    type: 'POST',
    data: {
        AppID: AppID
    },
    error: function () {
        alert('there was an error while fetching events!');
    }
}
function GetEvents(AppID) {
    $('#calendar').fullCalendar('removeEventSource', eventSource);
    eventSource.data.AppID = AppID;
    $('#calendar').fullCalendar('addEventSource', eventSource);
}

希望这对你有帮助!