使用jQuery在日曆中正確顯示多日事件？

Question

我試圖增強jQuery的片段，我發現在這裏stackoverlow（HTML markup for multi-day calendar events），但我碰到的，我真的不知道如何克服perculiar問題。基本上我想要實現的目的是避免在日曆中疊加多日事件。由於我只有1個聲望點（因爲我是新手），我無法用屏幕轉儲來解釋自己，但必須（至少試着）以書面形式解釋我自己。

所以，這裏是我的問題。指數[3]在所述陣列的事件[]下面開始第4天，但由於每天四次還包含索引[0，1]的EVENTCOUNT被設定爲3。這意味着，如果在第四天發生新的事件將被給予evenCount 4.到目前爲止沒有問題。然而在第五天有三個事件（索引[0,3,4]）。現在...這是我的問題。索引[3]在eventCount 3的第4天開始並持續到第12天，而索引[5]從第5天開始，並且因爲當天只有三個事件而被賦予與索引[3]相同的eventCount。下面的代碼片段（榮譽給ThinkingStiff的基本代碼）：

var events = [{ from: 3, to: 9 }, { from: 4, to: 4 }, { from: 9, to: 11 },{ from: 4, to: 12 },{ from: 5, to: 7 }]; 

for(var eventIndex = 0, event; event = events[eventIndex], eventIndex < events.length; eventIndex++) { 
for(var dayIndex = event.from; dayIndex <= event.to; dayIndex++) { 
    var dayElement = document.getElementById('day' + dayIndex), 
     firstDay = document.getElementsByClassName('event' + eventIndex), 
     top; 
    if(firstDay.length) { 
     top = firstDay[0].style.top; 
    } else { 
     var eventCount = dayElement.getElementsByClassName('event').length; 
     top = (eventCount * 20) + 'px'; 
    }; 
    var html = '<div ' 
     + 'class="event event' + eventIndex + '" ' 
     + 'style="top: ' + top + ';">' 
     + eventIndex 
     + '</div>'; 
    dayElement.insertAdjacentHTML('beforeEnd', html); 
}; 
};  

我想實現的是一個檢查，以確定是否存在從當天的持續事件之前被添加到EVENTCOUNT那之前需要添加新的eventCounts，以便新事件不會堆疊在現有事件之上。我如何實現這一目標？

雖然我在這 - 事實證明，該陣列不允許額外的參數，例如「主題」。是否可以展開數組來包含自定義參數而不破壞整個代碼？

每個提示是極大的讚賞。

Answer 1

我也爲了擴大到程序員的一個更廣泛的觀衆拋出這個問題，在Facebook上，我得到了這個奇妙的解決方案，我略有改善，以滿足我的某些需要。 （我已經離開了CSS和HTML - 你可以在下面的鏈接找到它）

Multi-day event calendar with javascript

var events = [{ 
    name: 'Pelle', 
    color: 'red', 
    from: 3, 
    to: 9 
}, { 
    name: 'Pelle', 
    color: '#c93', 
    from: 9, 
    to: 10 
}, { 
    name: 'Martin', 
    color: 'blue', 
    from: 4, 
    to: 4 
}, { 
    name: 'Willy', 
    color: 'green', 
    from: 9, 
    to: 11 
}, { 
    name: 'Erik', 
    color: 'magenta', 
    from: 4, 
    to: 12 
}, { 
    name: 'Barbro', 
    color: 'yellow', 
    from: 5, 
    to: 7 
}, { 
    name: 'Ludwig', 
    color: '#39c', 
    from: 11, 
    to: 14 
}]; 


var daysInMonth = 31, 
    firstDayOfMonth = 1, // 0 = Monday and so on 
    slotsInDay = 4, // How many slots can be in a single day? Depends on height. 
    eventHeightPx = 20, 
    days = {}, 
    dayNames = ['Måndag', 'Tisdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag', 'Söndag'], 
    s, 
    i, 
    d; 


// Populate our days-object. 
// Each day is named after the date and contains events and slots 
for (i = 0; i < daysInMonth; i++) { 
    days[i + 1] = { 
     events: [], 
     slots: [] 
    }; 
} 


// Run through all the events and push a copy of it to all days where it occurs. 
// Also assign them unique IDs. 
for (var eventIndex = 0; eventIndex < events.length; eventIndex++) { 
    events[eventIndex].id = eventIndex; 
    for (var dayIndex = events[eventIndex].from; dayIndex <= events[eventIndex].to; dayIndex++) { 
     days[dayIndex].events.push(events[eventIndex]); 
    } 
} 


// Output the HTML for the days of the calendar 
// Each day is a list item in the calendar list 

// Day names 
for (i = 0; i < dayNames.length; i++) { 
    $('#calendar').append('<li class="dayName">' + dayNames[i] + '</li>'); 
} 

// Last month 
for (i = 0; i < firstDayOfMonth; i++) { 
    $('#calendar').append('<li class="dayInPreviousMonth"></li>'); 
} 

// This month 
for (var day in days) { 
    $('#calendar').append('<li data-date="' + day + '" class="dayInThisMonth">' + day + '</li>'); 
} 

// Next month (to fill out the full last week) 
for (var i = 0; i < 7 - (firstDayOfMonth + daysInMonth) % 7; i++) { 
    $('#calendar').append('<li class="dayInNextMonth"></li>'); 
} 


// Run through all the days of this month 
$('.dayInThisMonth').each(function() { 
      var date = $(this).data('date'); // Grab date from the data-attribute 

    // If this day have events 
    if (days[date].events.length) { 
     var s, 
      useSlot; 

     c('\n*** Day ' + date + ' ***\n'); 

     // Run through all the events for this day 
     for (var e in days[date].events) { 

      c('\nEvent id ' + days[date].events[e].id + 
       ' name ' + days[date].events[e].name + 
       ' from ' + days[date].events[e].from + 
       ' to ' + days[date].events[e].to); 

      useSlot = -1; 

      if(date != days[date].events[e].from) { 
       // If this is not the first day for the event 
       // check the slots in the first day of the event to find the position 
       c("Event should be previously allocated."); 
       for (s = 0; s < slotsInDay; s++) { 

        c('Checking slot ' + s + ' in day '+ days[date].events[e].from); 

        if (days[days[date].events[e].from].slots[s] !== undefined && 
         days[days[date].events[e].from].slots[s] == days[date].events[e].id) { 
         c('Found this event. Use that slot.'); 
         useSlot = s; 
         break; 
        } 
       } 
      } 
      else 
      { 
       // If this is the first day of the event 
       // find the first open slot of current day. 
       for (s = 0; s < slotsInDay; s++) { 
        c('Checking slot ' + s + ' for availabilty'); 
        if (days[date].slots[s] !== undefined) { 
         c('Slot is not free. Allocated by ' + days[date].slots[s]); 
         slotIsFree = false; 
        } else { 
         c('Slot is free. Use it.'); 
         useSlot = s; 
         break; 
        } 
       } 
      } 

      c("Will use slot " + s); 

      var top = s * eventHeightPx; 
      $(this).append('<div class="event ' + (days[date].events[e].from == date ? 'firstEvent' : '') + 
       ' ' + (days[date].events[e].to == date ? 'lastEvent' : '') + 
       '" style="background-color: ' + days[date].events[e].color + ';top: ' + top + 'px">' + days[date].events[e].name + '</div>'); 

      c('Allocating slot '+s+' to event id '+days[date].events[e].id); 
      days[date].slots[s] = days[date].events[e].id; 

     } 
    } 
}); 


function c(t) { 
    $('#console').append(t + "\n"); 
} 

這整潔的小的JavaScript渲染這一切只是因爲我祝願。隨着一些調整，我已經刪除了HTML呈現，因爲日曆網格是用VB.NET呈現的。我希望爲他的快速編程感謝Niclas Lardh。