2

我正在使用这个网站上的 JQuery eventcalendar 插件。

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

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

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

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

在此处输入图像描述

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

2 回答 2

0

我刚刚做了同样的增强（实际上仍然微调），我使用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 个不同日历月中的事件等）

于 2013-06-15T08:03:04.950 回答
0

每当将鼠标悬停在包含结束日期的日期上时，我为同一个脚本做了类似的事情：

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

正如你所看到的，我采用了相同的代码，只是为每个 var 赋予了一个新的命名，只是在每个 var 中添加了 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 数据库中检索数据....给我留言。

于 2014-03-08T12:17:48.130 回答