javascript - 全日历 - 区分过去的事件和 future 的事件

Question

我想在全日历中区分过去的事件和 future 的事件。我已经加载并渲染了日历中的所有事件。我怎样才能用两种不同的颜色区分过去的事件和 future 的事件。这里是 JsFiddle Link

$('#calendar').fullCalendar({
    //theme: true,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: moment().format("YYYY-MM-DD"),
    editable: true,
    events: {
        url: 'http://www.json-generator.com/api/json/get/ccUKVDYErS?indent=2',
        error: function() {
            $('#script-warning').show();
        },
        success: function(){
            alert("successful: You can now do your stuff here. You dont need ajax. Full Calendar will do the ajax call OK? ");   
        }
    },
    loading: function(bool) {
        $('#loading').toggle(bool);
    }
});

});

Answer 1

这可以从服务器端实现；在事件数据发送到客户端之前或在从服务器接收到事件数据之后在客户端。但请始终牢记，由于客户端计算机上的时间不正确或时区不同，服务器时间和客户端之间可能存在时间差。 同时，我创建了 JSFiddle显示客户端实现。

$(document).ready(function() {

    $('#calendar').fullCalendar({
        //theme: true,
        eventBorderColor: '#A5C9FF', //General Event Border Color
        eventBackgroundColor: '#1168AC', //General Event Background Color
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: "2014-08-22",
        editable: true,
        events: {
            url: 'http://www.json-generator.com/api/json/get/ccUKVDYErS?indent=2',
            error: function() {
                $('#script-warning').show();
            },
            success: function(data){
                for(var i=0; i<data.length; i++){//The background color for past events
                    if(moment(data[i].start).isBefore(moment())){//If event time is in the past change the general event background & border color
                        data[i]["backgroundColor"]="#48850B";
                        data[i]["borderColor"]="#336600";
                    }
                }
            }
        },
        loading: function(bool) {
            $('#loading').toggle(bool);
        }
    });

});