Question

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

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

我遇到的问题是每次选定的下拉项目发生变化时都会创建日历;因此，如果下拉选项更改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>

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

希望这有帮助！

FullCalendar控件MVC jQuery - 正在创建多个日历

1 个答案: