完整日历 - 区分未来活动中的过往活动 [英] Full Calendar - Differentiate Past Events from Future Events

问题描述

我想在fullcalendar中区分过去事件和未来事件。我已经加载并呈现了日历中的所有事件。如何使用两种不同的颜色区分过去事件和未来事件。以下是 JsFiddle Link

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

});

推荐答案

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

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

});

这篇关于完整日历 - 区分未来活动中的过往活动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！