Full Calendar - Differentiate Past Events from Future Events

问题

I want to differentiate Past events from Future events in fullcalendar.I have loaded and rendered all the events in the calendar.How can I differentiate the Past events and Future events with two different colors.Here is the 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);
    }
});

});

回答1:

This can be achieve from either the server side; before the events data is sent to the client or on the client side after the events data is received from the server. But always have in mind the time gap that can exist between the server time and the client either because of incorrect time on the client machine or different time zones. Meanwhile, I have created JSFiddle to show the client side implementation.

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

});

来源：https://stackoverflow.com/questions/25452968/full-calendar-differentiate-past-events-from-future-events

标签

javascript

jquery

fullcalendar