Question

我在下拉列表中选择选项时的代码：

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

},

当我选择一个选项并且一切正常时我会调用下一个函数：

代码：

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

然后，如果一切正常，我会调用下一个函数：

代码：

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



},

示例问题：

我在dropDown中选择“Jean Bergeret”：

在日历功能中，我有这个行代码：console.info(datos)，该行代码打印出来：

日历显示事件：

如果我在下拉列表中选择其他选项，则行代码console.info(datos)会打印：

而且没关系，因为这是事件的新来源：

但日历功能仍适用于上一个事件：

我需要更新事件，我认为这有用：

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

但没有..

我该如何解决这个问题？对不起，我的英文。

修改

我为每个事件添加了一个ID，这有帮助吗？

Answer 1

怎么样： -

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

我是这样做的：$('#calendar').fullCalendar( 'destroy' );当我在下拉列表中选择其他选项时，我不知道它是否优雅但是有效！

我如何更新fullcalendar jquery中的源事件？

3 个答案: