使用FullCalendar.js在多個日歷上創建事件

Question

我正在使用我網站上的FullCalendar javascript庫來並排顯示每個員工的日歷。 日歷顯示“日”視圖，因此很容易看到每個人的日程安排。

我的所有日​​歷並排顯示正確（每個日歷在各自的div中）。

我的問題是，通過單擊日歷創建新事件時，該事件總是在頁面的最后一個日歷上創建，而不是您單擊的實際日歷。 我覺得它與select回調函數中的閉包有關。

/*
*   Setup calendars for each sales person
*/
var d = $.fullCalendar.parseDate($("#requested_date").val());

//employee id numbers (each employee has own calendar)
var employees = new Array(445,123,999,444); 

for(i=0;i<employees.length;i++)
{
        var employeeId = employees[i];

        //clear any prevoius calendar info
        $('#calendar_' + employeeId).html("");

        calendar[employeeId] = $('#calendar_' + employeeId).fullCalendar({
            header: {
                left: '',
                center: '',
                right: ''
            },
            year: d.getFullYear(),
            month: d.getMonth(),
            date: d.getDate(),
            defaultView: 'agendaDay',
            minTime: 7,
            maxTime: 19,
            height: 650,
            editable: true,
            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) { 

                calendar[employeeId].fullCalendar('renderEvent',
                    {
                        title: "This Estimate",
                        start: start,
                        end: end,
                        allDay: allDay
                    },
                    true // make the event "stick"
                );

                calendar[employeeId].fullCalendar('unselect');
            },
            events: {
                url: 'calendar/'+employees[employeeId],
                type: 'POST',
                data: {
                        'personId': employees[employeeId],
                        'ci_csrf_token': wp_csr_value
                    },
                error: function() {
                alert('there was an error while fetching events!');
            }
        }
    });
}

謝謝

Answer 1

當您選擇日歷employeeId等於444時，它將在最后一個日歷上呈現事件，請嘗試以下操作：

select: function(start, end, allDay , jsEvent ,view) { 
       $(view.element).parent().parent().fullCalendar('renderEvent',
                    {
                        title: "This Estimate",
                        start: start,
                        end: end,
                        allDay: allDay
                    },
                    true // make the event "stick"
                );

                $(view.element).parent().parent().fullCalendar('unselect');
}