Question

我正在创建一个待命时间表，用户可以在其中选择具有成员列表以及轮换长度和类型的组。当用户单击“创建计划”按钮时，将在表示此轮换计划的日历上显示事件列表。事件已创建并添加到事件数组中，但它们不会显示在日历上。当代码到达时，

 $('#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

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

感谢。

更新在查看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，其中包含一些示例代码来测试它fullcalendar example

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

fullcalendar addEventSource不将事件数组添加到日历

2 个答案: