完整日历-区分过去的事件和未来的事件

Question

我想在完整日历中区分过去事件和未来事件。我已经加载并渲染了日历中的所有事件。我如何用两种不同的颜色来区分过去事件和未来事件?这里是JsFiddle链接

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

Answer 2

   eventDataTransform = (eventData) => {
    let newDate = new Date();
      if(new Date(newDate.setHours(0, 0, 0, 0)).getTime() > eventData.start.getTime()){            
         eventData.color = "grey";   //For background     
          eventData.textColor = "black";
      }else{
          eventData.color = "blue";    
          eventData.textColor = "white";
      }
      return eventData;
  }