Question

我正在尝试使用fullCalendar删除其先前的事件源并在buttonclick上重新绑定到新的事件源。我现在一直在寻找一个小时的答案，但我找到的解决方案似乎都没有用。

我有一个页面，它是一个下拉菜单和fullCalendar cal上方的按钮。在页面加载时，日历会毫无问题地从数据库加载所有事件列表。我正在尝试实现的是一个客户端过滤器，它只会在单击按钮后显示我在下拉列表中选择的名称。

将名称过滤成新的JSON数组的功能工作正常，我的问题是我收到控制台错误，因为标题阻止我删除原始源并重新绑定新数组。 / p>

这是我的代码：

CSHTML：

<div class="member-filter-section">
        <div class="member-filter-container">
            <div class="staff-container">
                <p class="staff-name">Staff Member:</p>
                <div class="staff-select">
                    <select id="staff_list" multiple="multiple">
                        @foreach (var u in users)
                        {
                            <option value="@u.UserId">@u.UserName</option>
                        }
                    </select>
                </div>
            </div>
            <div class="branch-container">
                <p class="branch-name">Branch:</p>
                <div class="branch-select">
                    <select id="branch_list">
                        <option>City Center</option>
                        <option>Foxrock</option>
                        <option>Dalkey</option>
                    </select>
                </div>
            </div>
            <div id="filter" class="nav_button filter-button">Select</div>
        </div>
    </div>
    <div class="calendar-wrapper">
        <div id="calendar" class="calendar-body"></div>
    </div>

JS：

// The ajax to return a correct JSON array
        var eventsFeed = function (start, end, timezone, callback) {
            var id = @agentId;
            $.ajax({
                type: "POST",
                url: "/SystemManagement/Viewings/GetCalendarEventListings",
                data: { 'agentId' : id ,'start' : start.format(), 'end' : end.format()},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data) {
                    var events = [];
                    $.each(data,
                        function(obj) {
                            var eventObject = data[obj];
                            events.push({
                                title: eventObject.Title,
                                start: eventObject.StartTime,
                                end:  eventObject.EndTime,
                                id: eventObject.Id,
                                userId: eventObject.UserId,
                                color: eventObject.AppointmentColour,
                                attendee: eventObject.Attendee,
                                location: eventObject.Location,
                                type: eventObject.AppointmentType
                            });
                        });
                    globalEvents = events;
                    callback(events);
                    events = [];
                },
                error: function() {
                    console.log('Error');
                }
            });
        }

        $(document).ready(function () {
                $('#staff_list').chosen();
                $('#branch_list').chosen();

                // Gets the JSON array to populate the calendar on page load
                $('#calendar').fullCalendar({
                    defaultView: 'agendaDay',
                    header: {
                        left: 'prev,next, today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    height: 850,
                    events: eventsFeed,
                    eventClick: function(calEvent) {
                        buildModal(calEvent.type,calEvent.location,calEvent.attendee,calEvent.color, calEvent.start, calEvent.end);
                        modal.style.display = "block";
                    }
                });

                $('#filter')
                   .on('click',
                       function() {

                           var selectedStaffIds = $("#staff_list").val();
                           var filteredEvents = [];

                           globalEvents.forEach(function(obj) {
                               if (checkIfIdIsSelected(selectedStaffIds, obj.userId)) {
                                   filteredEvents.push(obj);
                               }
                           });
                           console.log(filteredEvents);
                           rebindCalendar(filteredEvents);
                           filteredEvents.length = 0;
                       });

                function checkIfIdIsSelected(staffId, objectId) {
                    return staffId.indexOf(objectId) > -1;
                }

                function rebindCalendar(eventsArray) {
                    $('#calendar').fullCalendar('removeEventSource', eventsFeed);
                    $('#calendar').fullCalendar('addEventSource', eventsArray);
                }

Answer 1

所以不知怎的，我猜想fullCalendar小部件会丢失。尝试在填充日历之前将DOM元素存储在var（如$calendar = $('#calendar')）中，并在rebindCalendar函数中重复使用它。

Answer 2

您的代码在这个小提琴中运行良好：this comment

如果您的<?xml version="1.0"?> ... ... <appSettings> ... ... <add key="MessageToLog" value="hello"/> ... ... </appSettings>不存在，则意味着它以某种方式从DOM中删除或其ID已更改，或者您尝试从其他文档（在iframe中）操作它，或者$不是jQuery ，或fullCalendar被函数破坏。

未捕获的TypeError：$（...）。fullCalendar在尝试删除事件源时不是函数

2 个答案: