Question

我想根据复选框过滤事件。我已经查看了迈克史密斯网站http://www.mikesmithdev.com/demo-fullcalendar-with-event-filtering/]上的代码示例，但我的处理方式略有不同，我无法弄清楚如何使其工作。我为我的事件创建了一个函数，它在初始化日历时工作正常。我参数化了该函数，以便我可以将已选择的组发送回服务器。但我无法弄清楚如何在change事件中使用此函数来刷新要显示的事件。这是我的初始化代码，工作正常：

$(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数组有2个ID。

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

更新我添加了函数＆＃39; addEventSource＆＃39;并为第二个参数尝试调用事件函数。数组在客户端正确设置，但在服务器端代码中，参数selectedGroupArray为null。这是代码：

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

如何重置事件功能的参数数组？的更新我没有＆＃39;类型＆＃39;在ajax调用中定义。一旦我加入：

type: "POST",

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

更新如果在取消选中组后重新加载页面，页面上会显示正确的组。在我调用了＆＃39; addEventSources函数后，我尝试添加

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

但除非我重新加载页面，否则仍无法显示正确的组。

Answer 1

我终于开始工作了。我的问题在于＆＃39; addEventSource＆＃39;功能签名，我没有＆＃39; timezone＆＃39;作为参数。这是我使用复选框过滤事件的最终解决方案，以防其他人遇到此问题...

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

fullcalendar添加另一个eventSource

1 个答案: