Question

我在一个月前问了这个问题并得到了答案：

但是，现在我在几个月之间切换时会看到重复： duplication of events

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

});

所以这就是发生的事情：

FC初始化并获取事件 - 到目前为止，非常好。
FC的视图已更改为下个月，并且会获取更多活动。现在，您的events数组包含本月和上个月的活动。
FC的观点已更改回上个月。获取事件并将其添加到同一事件数组中。现在你有重复。

您应该将事件数组的范围限定在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;
}

Answer 2

简单的解决方案，添加此事件：

viewRender: function(view, element) { 
    $("#calendar").fullCalendar( 'refresh' ) 
}

jquery FullCalendar - 正在复制的项目

2 个答案:

更好