javascript .addclass開始和結束之間的每個日期

Question

我正在使用來自此website的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'); 
        } 

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添加到每個變種。

當然，當推送事件數據時，您需要確定數據是否包含結束日期。 你使用會像你不同的格式化，我做了這個腳本引導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數據庫的數據....給我留言。