首页 文章

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

提问于
浏览 次
0

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

$('#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数组不会显示在日历上？如果你能告诉我哪里出错了，我将不胜感激 .

谢谢 .

UPDATE 在查看newEvents数组之后，似乎所有的开始和结束日期都是相同的 . 有3个事件，每个事件应持续1周（7天） . 但是所有事件都有相同的开始和结束日期 .

javascript jquery fullcalendar

2 回答

  • 0

    最终答案：

    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)));
    回复于
  • 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

    回复于

相关问题