渲染后更改Fullcalendar事件源

Question

我一直在使用FullCalendar v1.5.3进行MS SharePoint替换.

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

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

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

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

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

这是我到目前为止:

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

我错过了什么？

Answer 1

有一些方法叫removeEventSource()和addEventSource()允许您调整的源列表.我有一个类似的情况,我需要在月视图中隐藏其中一个源,但在其他上下文中显示它,我发现在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()- 这是确保显示器正确重新渲染所必需的.