Question

我想在fullcalendar中区分过去的事件和Future事件。我已经加载并呈现了日历中的所有事件。如何用两种不同的颜色区分Past事件和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);
        }
    });

});

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

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

2 个答案: