在呈现后更改Fullcalendar事件源

Question

我一直在使用FullCalendar V1.5.3替换MS SharePoint。

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

/Calendar/Events/FeedTasks？开始=1338094800&结束=1341118800&_=1339103302326

我们使用一个选择框将事件源更改为只显示任务（从不同的表中提取），因此在选择之后，ajax调用更改为：

/日历/事件/FeedEvents？开始=1338094800&结束=1341118800&_=1339103302326

这管用。但是，它不只是更改当前的日历事件源，而是创建一个重复的日历表（在当前的日历表之上创建一个新的divclass=“fc-content”div)。

这是我目前所掌握的：

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

我错过了什么？

Answer 1

有一些名为RemoveEventSource()和AddEventSource()的方法允许您调整源列表。我有一个类似的情况，我需要在month视图中隐藏一个源，但在其他上下文中显示它，我发现在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()的使用-这是确保正确重新呈现显示所必需的。