CODEWITHSUNDEEP
javascriptjqueryfullcalendar
user3431651
user3431651

Reputation: 91

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

});

Upvotes: 1

Views: 1940

Answers (2)

Vivek Singh
Vivek Singh

Reputation: 51

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

Upvotes: 0

Paullo
Paullo

Reputation: 2127

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

});

Upvotes: 3

Related Questions