Question

我正在使用此website中的JQuery eventcalendar插件。

我的活动有一个开始和结束日期，我有以下代码，在日历上添加一个绿色方块（一个用于开始日期，一个用于结束日期）。

我正在努力解决的问题是如何为开始日期和结束日期之间的每个日期添加绿色方块。

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

将突出12日13日14日和15日

enter image description here

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

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

正如您所看到的，我使用相同的代码并为每个var添加一个新的命名，只需将End添加到每个var。

当然，当推送事件数据时，您需要确定数据是否包含结束日期。你使用的格式化将与你的格式不同，我使这个脚本与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数据库中检索数据....给我留言。

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

2 个答案: