javascript .addclass，开始和结束之间的每个日期

Question

我正在使用来自此网站的JQuery eventcalendar插件。

我的事件有一个开始和结束日期，我有以下代码，在日历上添加了一个绿色方块（一个代表开始日期，一个代表结束日期）。

我苦苦挣扎的一点是如何为开始日期和结束日期之间的每个日期添加一个绿色方块。

eg start date - > 12-08-2012 
end date -> 15-08-12

将突出显示12th 13th 14th和15th

var eventDate = new Date(parseInt(event.startdate)),
eventYear = eventDate.getFullYear(),
eventMonth = eventDate.getMonth(),
eventDay = eventDate.getDate();

var eventDate1 = new Date(parseInt(event.enddate)),
eventYear1 = eventDate1.getFullYear(),
eventMonth1 = eventDate1.getMonth(),
eventDay1 = eventDate1.getDate();

// 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('.currentMonth .eventsCalendar-daysList #dayList_' + eventDay).addClass('dayWithEvents');

                    }


if (eventYear1 == flags.wrap.attr('data-current-year') && eventMonth1 == flags.wrap.attr('data-current-month')) {
                        flags.wrap.find('.currentMonth .eventsCalendar-daysList #dayList_' + eventDay1).addClass('dayWithEvents');
                    }

Answer 1

我刚刚做了相同的增强（实际上仍然对其进行了微调），并且我使用datejs进行日期匹配。 我在处理日历插件时已将其移植到github仓库中，但尚未将其增强。 如果您仍然对答案感兴趣，我可以快点完成它并提供链接-但是它的内容如下：

var daysElement = $element.find('.currentMonth .eventsCalendar-daysList');
var dateToBeChecked = new Date(parseInt(event.startDate));
var endDate = new Date(parseInt(event.endDate));
while (dateToBeChecked.compareTo(endDate) <=0) {
    daysElement.find('#dayList_' + dateToBeChecked.getDate())
               .addClass('dayWithEvents');
    dateToBeChecked.addDays(1);
}

（请注意，“微调”涉及处理2个不同日历月中存在的事件，等等。）

Answer 2

每当将鼠标悬停在包含结束日期的日期上时，我都会对同一脚本进行类似的操作：

            // 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('.currentMonth .eventsCalendar-daysList #dayList_' + parseInt(eventDay)).addClass('list-group-item-success');

            if (event.date_end) {
                 $('#dayList_' + parseInt(eventDay)).hover(
            function () {
                $('#dayList_' + parseInt(eventDay)).nextUntil('#dayList_' + parseInt(eventDayEnd)).andSelf().add('#dayList_' + parseInt(eventDayEnd)).addClass('list-group-item-danger');

                       },
            function () {
                $('#dayList_' + parseInt(eventDay)).nextUntil('#dayList_' + parseInt(eventDayEnd)).andSelf().add('#dayList_' + parseInt(eventDayEnd)).removeClass('list-group-item-danger');
                       }
            );

            }

在上述操作生效之前，需要进行一些修改。 在生成每个数据的部分中：

$.each(data, function(key, event) {

我添加了一些额外的代码：（第一个IF）

                    if (event.date_end) {
                    var eventDateTimeEnd = event.date_end.split(" "),
                        eventDateEnd = eventDateTimeEnd[0].split("-"),
                        eventTimeEnd = eventDateTimeEnd[1].split(":"),
                        eventYearEnd = eventDateEnd[0],
                        eventMonthEnd = parseInt(eventDateEnd[1]) - 1,
                        eventDayEnd = parseInt(eventDateEnd[2]),
                        //eventMonthToShow = eventMonth,
                        eventMonthToShowEnd = parseInt(eventMonthEnd) + 1,
                        eventHourEnd = eventTimeEnd[0],
                        eventMinuteEnd = eventTimeEnd[1],
                        eventSecondsEnd = eventTimeEnd[2],
                        eventDateEnd = new Date(eventYearEnd, eventMonthEnd, eventDayEnd, eventHourEnd, eventMinuteEnd, eventSecondsEnd);                           
                }

第二中频

                    if (event.date_end) {
                    var eventDateEnd = new Date(parseInt(event.date_end)),
                        eventYearEnd = eventDateEnd.getFullYear(),
                        eventMonthEnd = eventDateEnd.getMonth(),
                        eventDayEnd = eventDateEnd.getDate(),
                        eventMonthToShowEnd = eventMonthEnd + 1,
                        eventHourEnd = eventDateEnd.getHours(),
                        eventMinuteEnd = eventDateEnd.getMinutes();
                        }

如您所见，我采用了相同的代码，只是为每个变量指定了新的名称，只需将End添加到每个变量中即可。

然后当然，当推送事件数据时，您需要确定数据是否包含结束日期。 您使用的格式将与您使用的格式不同，我使此脚本与Bootstrap 3.10一起使用

if (event.date_end) {
                                    events.push('<li id="' + key + '" class="list-group-item '+event.type+'"><time datetime="'+eventDate+'"><em>' + eventStringDate + '</em><small>'+eventHour+":"+eventMinute+'</small></time>----TILL-----<time datetime="'+eventDateEnd+'"><em>' + eventStringDateEnd + '</em><small>'+eventHourEnd+":"+eventMinuteEnd+'</small></time>'+eventTitle+'<p class="eventDesc ' + eventDescClass + '">' + event.description + '</p></li>');
                                    }else{
                                    events.push('<li id="' + key + '" class="list-group-item '+event.type+'"><time datetime="'+eventDate+'"><em>' + eventStringDate + '</em><small>'+eventHour+":"+eventMinute+'</small></time>'+eventTitle+'<p class="eventDesc ' + eventDescClass + '">' + event.description + '</p></li>');
                                    }

在生成的Json中，我添加了一个新字段：

{ 
                        "date": "1394233485248", 
                        "type": "demo", 
                        "title": "Project B demo", 
                        "description": "Lorem ipsum dolor.", 
                        "url": "http://www.event2.com/",
                        "date_end": "1402891200000" 
                        },

如果有人想帮助您从mysql / pdo数据库中检索数据，请给我一条消息。