fullcalendar添加另一个eventSource

Question

我想根据复选框过滤事件。我已经审查了mikesmith网站上的代码示例http://www.mikesmithdev.com/demo-fullcalendar-with-event-filtering/]，但我做的事情有点不同，我不知道如何使它工作。我为我的事件创建了一个函数，它在日历初始化时工作良好。我对函数进行了参数化，以便可以将已选择的组发送回服务器。但是我不知道如何在更改事件中使用此函数来刷新要显示的事件。这是我的初始化代码，工作良好:

$(document).ready(function () {
// page is now ready, initialize the calendar...
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var groupSelectedArray = [];
$('input[type="checkbox"]').each(function () {
    if ($(this).is(":checked")) {
        groupSelectedArray.push($(this).val());
    }
});
var groupData = { selectedGroups: groupSelectedArray };
$('#calendar').fullCalendar({
    header:
    {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    titleFormat: {month: 'MMMM'},
    defaultView: 'month',
    editable: false,
    eventSources: [
        {
            events: function (start, end, groupSelectedArray, callback) {
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("GetAllEvents", "Home")',
                    data: JSON.stringify(groupData),//{ selectedGroups: groupSelectedArray },
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (doc) {
                        var events = [];
                        $(doc).each(function () {
                            events.push({
                                title: $(this).attr('title'),
                                start: $(this).attr('start'),
                                end: $(this).attr('end'),
                                id: $(this).attr('id'),
                                description: $(this).attr('description'),
                                color: $(this).attr('color'),
                                textColor: 'black'
                            });
                        });
                        callback(events);
                    },
                    error: function () {
                        alert("There was an error fetching events!")
                    }
                });
            }
        }
    ]
});

这是标记:

<div id="groups" style="float:left; width: 200px; height: 100px">
    <div style="border: 2px solid black; background-color: lightblue">
        <label><input type="checkbox" checked="checked" name="e1" id="e1" value="1" />Warehouse Group</label>     
    </div>
    <div style ="border: 2px solid black; background-color: red">
        <label><input type="checkbox" checked="checked" name="e2" id="e2" value="2" />Interface Group</label>     
    </div>
</div>
<div id='calendar' style="float:right; width: 75%; height: 75%"></div> 

下面是调用数据库获取事件数据的代码:

 private static List<Events> GetEventsFromDatabase(string[] selectedGroups)
        {
            OnCallEntities onCallDB = new OnCallEntities();
            List<Events> eventList = new List<Events>();
            int[] selectedGroupIDs = Array.ConvertAll(selectedGroups, int.Parse);
            var lstSchedules = (from sch in onCallDB.OnCallSchedules.AsEnumerable()
                               join techs in onCallDB.OnCallTeches.AsEnumerable() on sch.MemberID equals techs.ID
                                join grp in onCallDB.OnCallGroups.AsEnumerable() on sch.GroupID equals grp.ID
                                where selectedGroupIDs.Contains(sch.GroupID)
                                orderby sch.GroupID, sch.OnCallStartTime
                               select new { sch.GroupID, grp.Name, sch.ID, grp.GroupColor, techs.FirstName, techs.LastName, sch.OnCallStartTime, sch.OnCallEndTime }).ToList();
            foreach (var dr in lstSchedules)
            {
                Events newEvent = new Events
                {
                    id = dr.ID.ToString(),
                    title = dr.FirstName.ToString() + " " + dr.LastName.ToString(),
                    start = Convert.ToDateTime(dr.OnCallStartTime.ToString()).ToString("s"),
                    end = Convert.ToDateTime(dr.OnCallEndTime.ToString()).ToString("s"),
                    allDay = true,
                    description = dr.GroupID.ToString(),
                    color = dr.GroupColor
                };
                eventList.Add(newEvent);
            }
            return eventList;
        }

当用户更改复选框选择时，我想调用上面的事件函数来更改显示的事件。我不知道该怎么做。
这是我的更改函数:

$('input[type="checkbox"]').on('change', function () {
    var groupSelectedArray = [];
    $('input[type="checkbox"]').each(function () {
        if ($(this).is(":checked")) {
            groupSelectedArray.push($(this).val());
        }
    });
    var groupData = { selectedGroups: groupSelectedArray };
    $('#calendar').fullCalendar('removeEvents');
    $('#calendar').fullCalendar({
        events: function (start, end, groupSelectedArray, callback) {
            $.ajax({
                type: "POST",
                url: '@Url.Action("GetAllEvents", "Home")',
                data: JSON.stringify(groupData),//{ selectedGroups: groupSelectedArray },
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (doc) {
                    var events = [];
                    $(doc).each(function () {
                        events.push({
                            title: $(this).attr('title'),
                            start: $(this).attr('start'),
                            end: $(this).attr('end'),
                            id: $(this).attr('id'),
                            description: $(this).attr('description'),
                            color: $(this).attr('color'),
                            textColor: 'black'
                        });
                    });
                    callback(events);
                },
                error: function () {
                    alert("There was an error fetching events!")
                }
            });
        }
    });
    $('#calendar').fullCalendar('addEventSource', events);
    $('#calendar').fullCalendar('refetchEvents');
});

当使用事件函数来获取事件数据时，如何使用该函数来获取更改的数据?目前我只有2个事件组，但可能有几个更多。我不知道会有多少事件组，所以我认为使用参数化函数来获取事件将是获取数据的最佳方式。

谢谢。

我删除了函数:

$('#calendar').fullCalendar('addEventSource', events);

中的更改函数。当一个组未选中时，仍然显示两个组。该数组中只有1个id。然而，当我进入该方法时，GetAllEvents数组有两个id。

为什么参数得到重置时，它是在客户端javascript重置，但在服务器端它是相同的初始数组与两个id ?

我添加了函数'addEventSource'，并为第二个参数尝试调用事件函数。在客户端正确设置了数组，但在服务器端代码中，参数selectedGroupArray为空。这是代码:

$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', function (start, end, callback) {
        $.ajax({
            url: '@Url.Action("GetAllEvents", "Home")',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(groupData),
            success: function (doc) {
                var events = [];
                $(doc).each(function () {
                    events.push({
                        title: $(this).attr('title'),
                        start: $(this).attr('start'),
                        end: $(this).attr('end'),
                        id: $(this).attr('id'),
                        description: $(this).attr('description'),
                        color: $(this).attr('color'),
                        textColor: 'black'
                    });
                });
                callback(events);
            },
            error: function () {
                alert("There was an error fetching events!")
            }
        });   
});
$('#calendar').fullCalendar('refetchEvents');

如何重置事件函数的参数数组? 我没有在ajax调用中定义"类型"。有一次我加了:

type: "POST",

selectedGroupArray参数正在发送正确的值。在代码后面的方法GetAllEvents中，在参数中设置了正确的值。事件从数据库返回正确的事件。但是这些事件不会显示在日历上。日历上没有显示任何事件。

如果在取消选中一个组后重新加载该页，则该页上将显示正确的组。在我调用'addEventSources函数后，我尝试添加

$('#calendar').fullCalendar('refetchEvents');
$('#calendar').fullCalendar('renderEvents');

但是正确的组仍然不会显示，除非我重新加载页面

Answer 1

我终于让它工作了。我的问题是，在'addEventSource'函数签名中，我没有'时区'作为参数。这是我使用复选框过滤事件的最终解决方案，以防其他人有这个问题…

$("#e1").change(function () {
    var groupSelected = [];
    if (!$(this).is(":checked")) {
        var groupID = $(this).val();
        $('#calendar').fullCalendar('removeEvents', function (event) {
            return event.description == groupID;
        });
    }
    else {
        groupSelected.push($(this).val());
        var groupSelectedData = { selectedGroups: groupSelected };
        $('#calendar').fullCalendar('addEventSource', function (start, end, timezone, callback) {
            $.ajax({
                type: "POST",
                url: '@Url.Action("GetAllEvents", "Home")',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: JSON.stringify(groupSelectedData),
                success: function (doc) {
                    var events = [];
                    $(doc).each(function () {
                        events.push({
                            title: $(this).attr('title'),
                            start: $(this).attr('start'),
                            end: $(this).attr('end'),
                            id: $(this).attr('id'),
                            description: $(this).attr('description'),
                            color: $(this).attr('color'),
                            textColor: 'black'
                        });
                    });
                    callback(events);
                },
                error: function () {
                    alert("There was an error fetching events!")
                }
            });   
        });    
    }
});