1

我正在寻找实现由 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>
4

1 回答 1

0

所以基本上你想要做的就是移动你的

$('#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);
}

希望这可以帮助！

于 2013-05-17T21:05:00.957 回答