Change Fullcalendar event source after render

Question

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

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

/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:

/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" div on top of the current one).

This is what I have so far:

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

What am I missing?

Answer 1

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.

    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 fcSources hash to suit your sources, and then instantiate your fullCalendar object with just one of the sources, and swap it around using the removeEventSource and addEventSource methods.

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

Answer 2

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):

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: )

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 ;)           
        } 

Answer 3

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

    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;
   }
}

Answer 4

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)