How I can update the source events in fullcalendar jquery?

Question

Code when I select a option in a dropdown:

actionChangeUsuario: function(data){

    var self = this;
    var rut = '';
    var subData = 0;
    $("#span_msj_id").hide();

    $("#combo_usuarios_id").change(function() {
            $('#calendar').fullCalendar('refetchEvents');
            $.each(data, function(index,value){ 
                if(value.Id == $("#combo_usuarios_id").val()){
                    rut = value.rut;
                    nombre = value.nombre_trabajador+" "+value.apellido_trabajador;
                } 
            });
            $("#panel_calendar_id").show();
            if($("#combo_usuarios_id").val() == 0){
                $('#calendar').fullCalendar('removeEvents');
            }else{ 
                self.callTareasDatos(rut,nombre);
            }
    });

},

When I select a option and all it´s ok I call the next function:

Code:

callTareasDatos : function(rut,nombre){

    var self = this;

    self.ajaxCall('../../sistema/api/sistemaTareas/v1/'+"calendarioHoras", "POST", rut).then(function(results) {
        if(results != 1){
          if(results != null){
             self.calendar(results,rut,nombre);
            }else{
                $("#span_msj_id").fadeIn(1000);
                $("#span_msj_id").fadeOut(2500);
                $('#calendar').fullCalendar('removeEvents');
            }   
        }else{
            window.location.href = "login.html"; 
        }
    });
},

Then if all it's ok I call the next function:

Code:

calendar: function(datos,rut,nombre){

    var self = this;
    console.info(datos);   

    $('#calendar').fullCalendar({
        height: 500,
        events: datos,
        editable: false,
            header: {
                left: '',
                center: 'prev title next',
                right: '',
            },
        eventRender: function (event, element) {
            var self = this;
            element.find('.fc-title').append(" (<strong>"+ event.estado +"</strong>)");
        },
        dayRender: function (date, cell) {
            var theDate = $(cell).data('date');
            var fcDaySkel = $("#calendar div.fc-content-skeleton td[data-date='"+theDate+"'].fc-day-number");
            fcDaySkel.prepend("<button type='button' style='margin-right:5px; padding:0; border: none; background: none;' id ='editar_"+theDate+"_control_id' class='btn btn-default addButton' title='Ver/Editar/Agregar'><i class='fa fa-eye'></i></button>");
            self.actionBtnCalendar(theDate,rut,nombre,datos); 


        },

    })

    $('#calendar').fullCalendar('removeEvents');
    $('#calendar').fullCalendar('addEventSource', datos);         
    $('#calendar').fullCalendar('rerenderEvents'); 



},

Problem with example:

I select "Jean Bergeret" in the dropDown:

In the calendar function I have this line code : console.info(datos) , and that line code prints this:

And the calendar show the events:

If I select other option in the dropdown , the line code console.info(datos) prints:

And that it's ok because are the new sources to the event:

But the calendar function still works with the last event:

I need update the events and I thought that with this works :

        $('#calendar').fullCalendar('removeEvents');
        $('#calendar').fullCalendar('addEventSource', datos);         
        $('#calendar').fullCalendar('rerenderEvents'); 

But no..

How can I fix this? , sorry my english.

EDIT

I added a Id to each events , this helps?

Answer 1

How about:-

eventSource: null,

calendar: function(datos,rut,nombre){

    var self = this;
    console.info(datos);   

    $('#calendar').fullCalendar({
        height: 500,
        events: datos,
        editable: false,
            header: {
                left: '',
                center: 'prev title next',
                right: '',
            },
        eventRender: function (event, element) {
            var self = this;
            element.find('.fc-title').append(" (<strong>"+ event.estado +"</strong>)");
        },
        dayRender: function (date, cell) {
            var theDate = $(cell).data('date');
            var fcDaySkel = $("#calendar div.fc-content-skeleton td[data-date='"+theDate+"'].fc-day-number");
            fcDaySkel.prepend("<button type='button' style='margin-right:5px; padding:0; border: none; background: none;' id ='editar_"+theDate+"_control_id' class='btn btn-default addButton' title='Ver/Editar/Agregar'><i class='fa fa-eye'></i></button>");
            self.actionBtnCalendar(theDate,rut,nombre,datos); 


        },

    })

    if(self.eventSource != null)
       $('#calendar').fullCalendar('removeEventSource', self.eventSource);

    $('#calendar').fullCalendar('addEventSource', datos);         
    $('#calendar').fullCalendar('rerenderEvents'); 

    self.eventSource = datos;

}

,

Answer 2

Have you tried to add 'id' fields to the Objects that represent the events? That worked for me.

EDIT: Your function should look like this:

calendar: function(datos,rut,nombre){

    var self = this;
    console.info(datos);   

    /*$('#calendar').fullCalendar({
        height: 500,
        events: datos,
        editable: false,
            header: {
                left: '',
                center: 'prev title next',
                right: '',
            },
        eventRender: function (event, element) {
            var self = this;
            element.find('.fc-title').append(" (<strong>"+ event.estado +"</strong>)");
        },
        dayRender: function (date, cell) {
            var theDate = $(cell).data('date');
            var fcDaySkel = $("#calendar div.fc-content-skeleton td[data-date='"+theDate+"'].fc-day-number");
            fcDaySkel.prepend("<button type='button' style='margin-right:5px; padding:0; border: none; background: none;' id ='editar_"+theDate+"_control_id' class='btn btn-default addButton' title='Ver/Editar/Agregar'><i class='fa fa-eye'></i></button>");
            self.actionBtnCalendar(theDate,rut,nombre,datos); 
        },

    })*/

    // Try either the option 1 or the option 2
    // 1 RemoveEvents as a whole
    $('#calendar').fullCalendar('removeEvents');
    // 2 For me 'removeEvents' did not work, so I had to remove all the events one by one
    $('#calendar').fullCalendar('removeEvents', hereTheEventIdThatYouWantToRemoveAsString);


    $('#calendar').fullCalendar('addEventSource', datos);   

    // Not sure if this step is necessary      
    $('#calendar').fullCalendar('rerenderEvents'); 
}

Note the commented piece of code. It is commented because what you are doing there is reloading the calendar, which should be correct, but for some reason it doesn't perform its job and seems to do nothing. Then, you should be able to add/remove events as you wish. If this solution doesn't work I think I won't can help you any more : (

Answer 3

I did it using this : $('#calendar').fullCalendar( 'destroy' ); when I select other option in the dropdown, I don't know if is elegant but works!