Question

我正在使用此网站http://www.vissit.com/jquery-event-calendar-plugin-english-version/

中的活动日历插件

目前，事件日历能够显示所有事件，事件颜色为绿色，例如2016年1月5日，2016年3月5日等，如图所示。但是，我想要的活动日历是，例如今天是2016年5月2日，如果参考上面的图片，过去的活动将是2016年1月5日。我希望过去的活动与未来的活动（以绿色着色）有不同的颜色，以显示过去和未来活动之间的差异。请注意，如果2016年5月2日（今天的日期）有活动，它仍将被视为未来活动。

这是确定今天日期的代码（如下所示）

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

将颜色应用于具有事件的日期的代码（如下所示）

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

上面的所有代码都是从jquery.eventCalendar.js

获得的

非常感谢您的帮助，谢谢。

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>

区分过去事件与未来事件（过去和未来，两者都会有不同的颜色）

1 个答案: