jQuery 渲染后更改 Fullcalendar 事件源

Change Fullcalendar event source after render

提问by Kingsley

I've been using FullCalendar v1.5.3 for a MS SharePoint replacement.

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

I'm trying to re-render the calendar event's source. For instance, when the page loads by default this is the ajax call

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

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

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

We're using a select box to change the events source to only show tasks (pulled from different table), so after a selection the ajax call changes to:

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

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

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

This works. However, rather than just changing the current calendar event source, it creates a duplicate calendar table (creates a new div class="fc-content" divon top of the current one).

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

This is what I have so far:

这是我到目前为止：

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

What am I missing?

我错过了什么？

回答by RET

There are some methods called removeEventSource()and addEventSource()that allow you to tweak the sources list. I had a similar situation where I needed to hide one of the sources in month view, but show it in other contexts, and I found removing and re-adding elements in the eventSources array the cleanest way to achieve this.

有一些方法叫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;
        }
    });

Don't just copy/paste this code, because it's not solving exactly your problem. But you should be able to take some ideas from it. Tweak the fcSourceshash to suit your sources, and then instantiate your fullCalendar object with just one of the sources, and swap it around using the removeEventSourceand addEventSourcemethods.

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

Note also the use of refetchEvents()- that's necessary to make sure the display is rerendered correctly.

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

回答by Henrique C.

Thank you for this example :)

谢谢你的例子:)

I was not able to make this ( in above code the events array ) work for me, but i figure out another way to add event sources using some of the code you provided.

我无法使这个（在上面的代码中，事件数组）对我有用，但我想出了另一种使用您提供的一些代码添加事件源的方法。

This is my logic:

这是我的逻辑：

My primary source of events is this(this is the events source from the default examples of Fullcalendar):

我的主要事件来源是这个（这是来自 Fullcalendar 的默认示例的事件来源）：

events: function(start, end, callback) {
            $.ajax({
                type: 'POST',
                url: 'myurl',
                dataType:'xml',
                crossDomain: true,
                data: {
                    // our hypothetical feed requires UNIX timestamps
                    start: Math.round(start.getTime() / 1000),
                    end: Math.round(end.getTime() / 1000),                  
                    'acc':'2',                      
                },
                success: function(doc) {                            
                    var events = [];
                    var allday = null; //Workaround
                    var Editable = null; //Workaround  
                    $(doc).find('event').each(function() 
                    {                       
                        if($(this).attr('allDay') == "false") //Workaround 
                                allday = false; //Workaround 
                        if($(this).attr('allDay') == "true") //Workaround 
                                allday = true; //Workaround
                        if($(this).attr('editable') == "false") //Workaround 
                                Editable = false; //Workaround 
                        if($(this).attr('editable') == "true") //Workaround 
                                Editable = true; //Workaround                       

                        events.push({
                            id: $(this).attr('id'),
                            title: $(this).attr('title'),
                            start: $(this).attr('start'),
                            end: $(this).attr('end'),                       
                            allDay: allday,
                            editable: Editable
                        });                             
                    }); 


                    //calendar.fullCalendar( 'addEventSource', othersources.folgas );
                    //calendar.fullCalendar( 'addEventSource', othersources.ferias );       
                    //calendar.fullCalendar('refetchEvents');               
                    callback(events);
                }
            });     
        }

Now i needed it to add more sources and to do this ouside the calendar (next to the date variables from fullcalendar examples) i made a variable like the code above, but with ajax calls similar to my primary: )

现在我需要它来添加更多源并在日历之外执行此操作（在 fullcalendar 示例中的日期变量旁边）我创建了一个类似于上面代码的变量，但使用类似于我的主要 ajax 调用:)

var othersources = {

   anothersource: {               
            events: function(start, end, callback) {
            $.ajax({
                type: 'POST',
                url: 'myurl',               
                data: {
                    // our hypothetical feed requires UNIX timestamps
                    start: Math.round(start.getTime() / 1000),
                    end: Math.round(end.getTime() / 1000),                  
                    'acc':'7',                      
                },          
                success: function(doc) {    

                    var events = [];
                    var allday = null; //Workaround
                    var Editable = null; //Workaround  
                    $(doc).find('event').each(function() 
                    {                       
                        if($(this).attr('allDay') == "false") //Workaround 
                                allday = false; //Workaround 
                        if($(this).attr('allDay') == "true") //Workaround 
                                allday = true; //Workaround
                        if($(this).attr('editable') == "false") //Workaround 
                                Editable = false; //Workaround 
                        if($(this).attr('editable') == "true") //Workaround 
                                Editable = true; //Workaround                       

                        events.push({
                            id: $(this).attr('id'),
                            title: $(this).attr('title'),
                            start: $(this).attr('start'),
                            end: $(this).attr('end'),                       
                            allDay: allday,
                            editable: Editable
                        });                             
                    });                         

                    callback(events); //notice this
                }
            });     

        },                
            cache: true,
            //error: function() { alert('something broke with courses...'); },
            color: 'green', //events color and stuff
            textColor: 'white',
            //className: 'course'
       }     
 }

The following code is similar to the above and is part of the calendar proprietys (inside calendar variable):

以下代码与上述类似，是日历属性的一部分（在日历变量内）：

            eventSources: [ othersources.anothersource ],           

viewDisplay: function(view) {    
        if (view.name == 'month'){
       // alert(view.name);
            //calendar.fullCalendar( 'addEventSource', othersources.folgas );
            calendar.fullCalendar( 'addEventSource', othersources.anothersource );
            //calendar.fullCalendar('refetchEvents'); //Notice i'm not doing the refetch events. And its working for me. but i'm calling thi elsewhere, every time i make an action. So you must figure it out ;)           
        } 

回答by jarisky

This is an old question but I was having a similar problem and RET's answer really helped, based on that I patched it with a counter that reset to make sure it wouldn't add duplicate event sources

这是一个老问题，但我遇到了类似的问题，RET 的回答确实有帮助，因为我用一个计数器修补了它，该计数器重置以确保它不会添加重复的事件源

    count = 0;
fcSources = [wholePlan, allActivities];

//calendar initialization {
viewRender: function(view) {

        if (view.name == 'agendaWeek' || view.name == 'month') {
            $('#fullcal').fullCalendar('removeEventSource', fcSources.allActivities);

            if (count > 0) {
                $('#fullcal').fullCalendar('addEventSource', fcSources.wholePlan);
            }

            count = 0;
        }

        if (view.name == 'agendaDay' && count == 0) {
            $('#fullcal').fullCalendar( 'addEventSource', fcSources.allActivities );
            $('#fullcal').fullCalendar('removeEventSource', fcSources.wholePlan);

            count += 1;
   }
}

回答by Eduardo Cooper

after two days I got it, this is my code:

两天后我得到了它，这是我的代码：

    $("#search").on("keypress", function(evt){
        if(evt.keyCode == 13) {
            var term = $(this).val();
            $.post(route_search, 
                            {
                                term: term,
                                async: false
                            },
                            function(data) {
                                var parsed = $.parseJSON(data);
                                $('#calendar').fullCalendar('removeEvents');
                                $('#calendar').fullCalendar( 'addEventSource', parsed );
                            }
            );               
        }
    }); 

There's a search input, when the user press enter key, an ajax post is sent to controller who returns an array os json values (events). (sorry about my poor english)

有一个搜索输入，当用户按下回车键时，一个 ajax 帖子被发送到控制器，控制器返回一个数组 os json 值（事件）。（抱歉我的英语不好）