jquery - 渲染后更改 Fullcalendar 事件源

Question

我一直在使用 FullCalendar v1.5.3 来替代 MS SharePoint。

我正在尝试重新渲染日历事件的源。例如，当页面默认加载时，这是 ajax 调用

/calendar/events/feedTasks?start=1338094800&end=1341118800&_=1339103302326

我们使用选择框将事件源更改为仅显示任务(从不同的表中提取)，因此在选择后，ajax 调用将更改为:

/calendar/events/feedEvents?start=1338094800&end=1341118800&_=1339103302326

这有效。但是，它不仅仅是更改当前日历事件源，而是创建一个重复的日历表(在当前日历表的顶部创建一个新的 div class="fc-content"div)。

这是我到目前为止所拥有的:

$("#TaskSelector").change(onSelectChange);   
    function onSelectChange(){
        $('#calendar').fullCalendar({
            events: '/calendar/events/' + $('#TaskSelector').val()
        });
    }
});

我错过了什么？

Answer 1

有一些名为 removeEventSource() 的方法和addEventSource()允许您调整源列表。我遇到过类似的情况，我需要在月 View 中隐藏其中一个源，但在其他上下文中显示它，我发现删除并重新添加 eventSources 数组中的元素是实现此目的的最干净的方法。

    var fcSources = {
        courses: {
                    url: base+'accessfm/calendar/courses',
                    type: 'GET',
                    cache: true,
                    error: function() { alert('something broke with courses...'); },
                    color: 'purple',
                    textColor: 'white',
                    className: 'course'
                },
        requests: {
                    url: base+'accessfm/calendar/requests',
                    type: 'GET',
                    cache: true,
                    error: function() { alert('something broke with requests...'); },
                    textColor: 'white',
                    className: 'requests'
                },
        loads:  {
                    url: base+'accessfm/calendar/loads',
                    type: 'GET',
                    cache: true,
                    error: function() { alert('something broke with loads...'); },
                    color: 'blue',
                    textColor: 'white',
                    className: 'loads'
                }
    };
<snip>
    $('#fullcalendar').fullCalendar({
        header: {
                    left: 'title',
                    center: 'agendaDay,agendaWeek,month',
                    right: 'today prev,next'
                },
        defaultView: 'agendaWeek',
        firstDay: 1,
        theme: true,
        eventSources: [ fcSources.courses, fcSources.requests, fcSources.loads ],
        viewDisplay: function(view) {
            if (lastView != view.name){ // view has been changed, tweak settings
                if (view.name == 'month'){
                    $('#fullcalendar').fullCalendar( 'removeEventSource', fcSources.loads )
                                      .fullCalendar( 'refetchEvents' );;
                }
                if (view.name != 'month' && lastView == 'month'){
                    $('#fullcalendar').fullCalendar( 'addEventSource', fcSources.loads );
                }
            }
            lastView = view.name;
        }
    });

不要只是复制/粘贴此代码，因为它并不能完全解决您的问题。但你应该能够从中汲取一些想法。调整fcSources散列以适合您的源，然后仅使用其中一个源实例化您的 fullCalendar 对象，并使用 removeEventSource 交换它。和addEventSource方法。

另请注意 refetchEvents() 的使用- 这是确保正确重新渲染显示所必需的。