fullcalendar addEventSource未向日历添加事件数组

Question

我正在创建一个随叫随到的时间表，其中用户选择具有成员列表和轮换长度和类型的组。当用户点击"Create Schedule"按钮时，日历上会显示一个事件列表，表示这个轮换时间表。事件被创建并添加到事件数组中，但它们不会显示在日历上。当代码到达

 $('#edit_calendar').fullCalendar('addEventSource', newEvents);

应用程序只是挂起，日历上没有显示任何事件。这是为click事件调用的函数:

$("#rotation_schedule_btn").click(function () {
    //create member list order    
    var memberList = [];         
    $("#rotationList li").each(function () {
        memberList.push({
            id: $(this).attr('id'),
            name: $(this).text(),
            color: $(this).css('background-color')
        })
    });
    //start and end date and time for new schedule
    var startDate = new Date($('#schedule_start_date').val());
    var endDate = new Date($('#schedule_end_date').val());
    //remove events between startDate & endDate
    $('#edit_calendar').fullCalendar('removeEvents', function (event) {
        if (event.start.toDate() >= startDate && event.start.toDate() <= endDate
               || event.end.toDate() >= startDate && event.end.toDate() <= endDate) {
            return true;
        }
    });
    //Create events from rotation schedule selected
    var newEvents = [];
    var rotation_length = $('#rotation_type_select option:selected').val();
    var rotation_start_date = new Date(startDate);
    var rotation_end_date = new Date(rotation_start_date);
    rotation_end_date.setDate(rotation_end_date.getDate() + parseInt(rotation_length));
    rotation_end_date.setMinutes(rotation_end_date.getMinutes() - 1);
    var member_index = 0;
    while (rotation_end_date <= endDate)
    {
        var event = new Object();
        event = {
            title: memberList[member_index].name,
            start: rotation_start_date,
            end: rotation_end_date,              
            objectID: memberList[member_index].id,
            color: memberList[member_index].color,
            allDay: true,
            textColor: 'black'
        };
        newEvents.push(event);
        rotation_start_date.setDate(rotation_start_date.getDate() + parseInt(rotation_length));         
        rotation_end_date.setDate(rotation_end_date.getDate() + parseInt(rotation_length));
        if ((memberList.length - 1) == member_index)
        {
            member_index = 0;
        }
        else {
            member_index++;
        }
    }           
    //Render events on calendar
     $('#edit_calendar').fullCalendar('addEventSource', newEvents);
}); //end create schedule button click

为什么neweevents数组不能在日历上显示?如果你能告诉我哪里错了，我将不胜感激。

谢谢。

在检查了newEvents数组之后，似乎所有的开始和结束日期都是相同的。共有3个项目，每个项目持续1周(7天)。但是所有的事件都有相同的开始和结束日期

Answer 1

我想我知道怎么回事了。在本例中，您传递的是对事件对象的引用，而不是rotation_start_date和rotation_end_date的值:

event = {
        title: memberList[member_index].name,
        start: rotation_start_date,
        end: rotation_end_date,              
        objectID: memberList[member_index].id,
        color: memberList[member_index].color,
        allDay: true,
        textColor: 'black'
    };

当您更新这些日期的值时，所有事件都会看到相同的更新，因为它们都对这些对象有相同的引用。你要做的就是声明新的变量来保存循环中的值或者使用rotation_start_date和rotation_end_date

中的值将事件的开始和结束日期设置为一个新的日期

    var event = new Object();
    event = {
        title: 'title',
        start: new Date(rotation_start_date),
        end: new Date(rotation_end_date),
        objectID: member_index,
        color: 'blue',
        allDay: true,
        textColor: 'black'
    };

您没有提供任何代码，但是我创建了一个带有一些示例代码的jsfiddle来测试这个完整的日历示例

Answer 2

最终答案:

 while (rotation_end_date <= endDate)
    {
        var event = new Object();
        event = {
            title: memberList[member_index].name,
            start: new Date(rotation_start_date),
            end: new Date(rotation_end_date),
            objectID: memberList[member_index].id,
            color: memberList[member_index].color,
            allDay: true,
            textColor: 'black'
        };
        newEvents.push(event);
        rotation_start_date = new Date(rotation_start_date.setDate(rotation_start_date.getDate() + parseInt(rotation_length)));
        rotation_end_date = new Date(rotation_end_date.setDate(rotation_end_date.getDate() + parseInt(rotation_length)));