javascript - 使用 fullCalendar 实时刷新数据

Question

我有 fullCalendar，它显示可以由不同用户编辑的事件，并且日历使用此功能每 15 秒重新获取一次事件:

setInterval(function(){ 
    $('#calendar').fullCalendar('refetchEvents');
},  15* 1000);

但是当事件状态发生更改时，我看不到实时更新(颜色更改、弹出警报等)，但是当手动刷新页面或在事件开始后 30 分钟内创建事件时，一切正常。

eventRender 的完整代码在这里:

            eventRender: function(event, element, view) {

                if (view.name == 'agendaDay') {
                    $('.fc-event-title').css("display", "block"); 
                }
                var mili = event.start.getTime() - now.getTime();
                var hour = now.getTime();
                var eventhour= event.start.getTime();
                if(event.status == 'open') {
                    if (eventhour< hour) {
                        element.css('background-color', '#999');
                    }
                    else{
                        element.css('background-color', '#70D549');
                        }
                    }
                else if(event.status == 'done') {
                    element.css('background-color', '#B2F0FF');
                    }
                else if(event.status == 'invalid') {
                    element.css('background-color', '#CC0000');
                    }
                else if(event.status == 'booked') {
                    if(mili < 1800000 && mili > 0){ 
                        $(".name2").html(event.status);
                        $(".t2").html(event.btitle);
                        $(".n2").html(event.name);
                        $(".s2").html(event.surname);
                        $(".ad2").html(event.address);
                        $(".zp2").html(event.city);
                        $(".ct2").html(event.zip);
                        $(".tl2").html("Tel: "+event.tel);
                        $(".ml2").html(event.email);
                        $(".title2").html('<strong>Description:</strong><br/>'+event.title+'');
                        var hcs1 = event.start.getHours();
                        var hcs = ("0" + hcs1).slice(-2);
                        var mcs1 = event.start.getMinutes();
                        var mcs = ("0" + mcs1).slice(-2);
                        $(".start2").html(hcs + ':' +mcs);
                        var hce1 = event.end.getHours();
                        var hce = ("0" + hce1).slice(-2);
                        var mce1 = event.end.getMinutes();
                        var mce = ("0" + mce1).slice(-2);
                        $(".end2").html(hce + ':' + mce);
                        var dc1 = event.start.getDate();
                        var dc = ("0" + dc1).slice(-2);
                        var mc1 = event.start.getMonth()+1;
                        var mc = ("0" + mc1).slice(-2);
                        var yc = event.start.getFullYear();
                    $(".date").html(dc + '.' + mc + '.' + yc + '.');
                        element.css('background-color','#00CCFF');
                        if(!localStorage[event.id+"alertdisplayed"]) {
                        $('.alert').dialog({ 
                            buttons: [{ 
                            text: "OK", 
                                click: function() { 
                                $( this ).dialog( "close" ); 
                                }
                            }]
                        });
                        localStorage[event.id+"alertdisplayed"] = true
                        }
                    }

                    if (eventhour < hour) {
                        element.css('background-color', '#B2F0FF');
                    }
                    else{
                        element.css('background-color', '#00CCFF');
                        }
                    }
                else if(event.status == 'storn') {
                    element.css('background-color', 'red');
                    }
                }

Answer 1

更改时重新获取事件:

$("#someID").change(function () {
    $('#yourCalendar').fullCalendar('refetchEvents');
});

不太好，但应该可以这样做:

$('#yourCalendar').fullCalendar( 'removeEventSource', source )
$('#yourCalendar').fullCalendar( 'addEventSource', source )