javascript-jQuery FullCalendar-重复的项目

我大约一个月前问了这个问题,得到了答案：

jquery FullCalendar using MVC and JSON

但是,现在我在两个月之间切换时看到重复项：

我的javaScript代码是：

    var source = '../calendar/PostCalendarData';
    $(document).ready(function () {

        var events = [];
        $('#calendar').fullCalendar('removeEvents');
        $('#calendar').fullCalendar({
            events: function(start, end, timezone, callback) { 
                $.ajax({ 
                    url: source, 
                    type: 'POST', 
                    data: { 
                        custom_param1: '', 
                        custom_param2: '' 
                    }, 
                    success: function (doc) {
                        $.each(doc, function (index, element) {
                            events.push(element);
                        });
                        callback(events);
                    } 
                }); 
            }

        });
    });

我正在使用存储过程(位于：../ calendar / PostCalendar)填充日历.

我需要做些什么来清除每个月的日历吗？

我在这里包括PostCalendar方法：

    [HttpPost]
    public ActionResult PostCalendarData()
    {

        SqlParameter param1 = new SqlParameter("@filterValue", "");
        var calAssignments = db.Database.SqlQuery<calendarAssignment>(
        "exec getCalendarInfo_v2 @filterValue ", param1).ToList<calendarAssignment>();

        List<calendarEvent> calEvents = new List<calendarEvent>();
        foreach (calendarAssignment item in calAssignments)
        {
            string[] splitDates = item.futureDates.Split(',');
            foreach(string s in splitDates)
            {
                calendarEvent calEvent = new calendarEvent();
                calEvent.title = item.name + " : " + item.chore;
                calEvent.description = item.chore;

                DateTime _futureDate;
                _futureDate = DateTime.Parse(s);
                calEvent.start = _futureDate.ToString("yyyy-MM-dd");
                calEvents.Add(calEvent);
            }
        }


        SqlParameter paramDaily = new SqlParameter("@filterValue", "daily");

        var calAssignmentsDaily = db.Database.SqlQuery<calendarAssignment>(
        "exec getCalendarInfo @filterValue ", paramDaily).ToList<calendarAssignment>();


        foreach (calendarAssignment item in calAssignmentsDaily)
        {
            string[] splitDates = item.futureDates.Split(',');
            foreach (string s in splitDates)
            {
                calendarEvent calEvent = new calendarEvent();
                calEvent.title = item.name + " : " + item.chore;
                calEvent.description = item.chore;

                DateTime _futureDate;
                _futureDate = DateTime.Parse(s);
                calEvent.start = _futureDate.ToString("yyyy-MM-dd");
                calEvents.Add(calEvent);
            }
        }

        return Json(calEvents);
    }

我还验证了C#代码中的calEvents始终返回相同的数字.因此,它似乎与javascript日历特别相关.

解决方法:

好的,首先让我们看一下您的代码：

var events = []; // array declared in global-ish scope
$('#calendar').fullCalendar('removeEvents'); // Calling the remove method before FC is initialized (this should give an error, no?)
$('#calendar').fullCalendar({ // Creating the FC
    events: function(start, end, timezone, callback) { // Defining the event source as a function
        $.ajax({ // This is called every time the FC needs new events
            url: source, 
            type: 'POST', 
            data: { 
                custom_param1: '', 
                custom_param2: '' 
            }, 
            success: function (doc) { // This is called every time the ajax call finishes
                $.each(doc, function (index, element) {
                    events.push(element); // Push events into your event array
                });
                callback(events); // add ALL the events in the event array to the FC
            } 
        }); 
    }

});

所以这是正在发生的事情：

> FC初始化并获取事件-到目前为止,一切都很好.
> FC的视图更改为下个月,并获取更多事件.现在,您的事件数组包含本月和上个月的事件.
> FC的视图改回到上个月.事件被提取并添加到同一事件数组.现在,您有了重复项.

您应该将事件数组的作用域设置在成功处理程序内,例如：

success: function (doc) { 
    var events = [];
    $.each(doc, function (index, element) {
        events.push(element); 
    });
    callback(events);
} 

或者只是在成功处理程序中清空数组.

更好了

不要使用定制的ajax调用来获取事件.使用内置方法之一.例如,JSON Feed method应该做您想要的.

events: { // Automatically fetches data if your script is set up right.
    url: source,
    type: 'POST', // Ajax url looks like /source?start=2013-12-01&end=2014-01-12
                 // Note: it includes dates.
    data: {
        custom_param1: '',
        custom_param2: ''
    },
    error: function() {
    }
}

如果脚本返回的JSON格式不完全适合FC的格式,请使用eventDataTransform：

function( eventData ) { // Your JSON script should still return an array
                       // This function is called once per array item (event)
    eventData.title = eventData.name; // For example
    return eventData;
}

标签：fullcalendar,javascript,asp-net-mvc,jquery
来源： https://codeday.me/bug/20191120/2046562.html