Differenzieren Sie vergangene Ereignisse von künftigen Ereignissen (Vergangenheit und Zukunft, sowohl andere Farbe hat)

Question

Im Eventkalender Plugin von dieser Website http://www.vissit.com/jquery-event-calendar-plugin-english-version/

Derzeit verwenden, der Veranstaltungskalender Lage ist, alle anzeigen Ereignisse mit dem Ereignis als grün z 1/5/2016, 3/5/2016 und usw. wie im Bild gezeigt. Der Veranstaltungskalender, den ich möchte, ist zum Beispiel heute, ist der 5/2/2016, wenn das Bild oben erwähnt wird, ist das vergangene Ereignis der 1.5.2016. Ich möchte, dass das vergangene Ereignis eine andere Farbe hat als das zukünftige Ereignis (grün markiert), um den Unterschied zwischen vergangenen und zukünftigen Ereignissen zu zeigen. Beachten Sie, dass wenn es ein Ereignis in 5/2/2016 (heutiges Datum) gibt, es immer noch als zukünftiges Ereignis betrachtet wird.

Dies ist der Code, der heute Datum bestimmen

(siehe unten)

for (dayCount = 1; dayCount <= daysOnTheMonth; dayCount++) { 
     var dayClass = ""; 

     if (day > 0 && dayCount === day && year === currentYear) { 
      dayClass = "today"; 
     } 

     daysList.push('<li id="dayList_' + dayCount + '" rel="'+dayCount+'" class="eventCalendar-day '+dayClass+'"><a href="#">' + dayCount + '</a></li>'); 
    } 

Der Code, der Farbe auf die Tage mit Ereignissen gelten (siehe unten)

// add mark in the dayList to the days with events 
       if (eventYear == flags.wrap.attr('data-current-year') && eventMonth == flags.wrap.attr('data-current-month')) { 
        flags.wrap.find('.eventCalendar-currentMonth .eventCalendar-daysList #dayList_' + parseInt(eventDay)).addClass('eventCalendar-dayWithEvents'); 
       } 

des Codes Alle oben wird erhalten von jquery.eventCalendar.js

Ihre freundliche Hilfe wird sehr geschätzt, danke.

Answer 1

HTML:

<div id="eventCalendar" style="width:300px; margin: 50px auto;"></div> 

<script src="http://code.jquery.com/jquery.min.js"></script> 
<!-- plugin has dependency of moment.js to show dates --> 
<script src="js/moment.js" type="text/javascript"></script> 
<script src="js/jquery.eventCalendar.js" type="text/javascript"></script> 

<script> 
$(function(){ 
/* 
var data = [{ "date": "2016-04-29 00:00:00", "type": "meeting", "title": "Testing", "description": "Please work", "url": "" }, 
      { "date": "2016-04-30 00:00:00", "type": "demo", "title": "Project B demo", "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", "url": "http://www.event2.com/" } 

]; 
*/ 
$('#eventCalendar').eventCalendar({ 
    //jsonData:data, 
    eventsjson:'data.json', 
    jsonDateFormat:'human', 
    dateFormat: 'dddd D-MM-YYYY' 
    }); 


}); 
</script>