javascript - jquery FullCalendar - 项目被复制

Question

我大约一个月前问过这个问题并得到了答案:

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 日历特别相关。

Answer 1

好的，首先让我们检查一下您的代码:

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

});

这就是正在发生的事情:

1. FC 初始化并获取事件 - 到目前为止一切顺利。
2. FC 的 View 更改为下个月，它获取更多事件。现在您的 events 数组包含本月和上个月的事件。
3. FC 的 View 改回上个月。事件被获取并添加到同一个事件数组中。现在你有重复项。

您应该在 success 处理程序中限定事件数组的范围，例如:

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

或者只是清空success 处理程序中的数组。

更好

不要使用自定义 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;
}