突出顯示鼠標懸停週末的事件

我已經設置了我的fullcalendar以顯示1天事件（以一種顏色顯示）和每週事件（以差異顏色顯示）的混合。我想提高事件的可見性，因爲它可能會導致大量重疊事件的混淆，所以我將其設置爲使鼠標懸停上的事件以黃色邊框突出顯示。突出顯示鼠標懸停週末的事件

這一切工作正常，除非我有一個事件，跨越週末 - 即。在星期三開始，結束於接下來的星期三 - 鼠標懸停事件僅突出顯示當前星期 - 事件在週末後下降的部分，未突出顯示，

任何幫助將不勝感激！

來源

2011-09-12 aoifeL

好吧，我得到了這個工作。

fullcalendar.js生成一個唯一的ID對於每個事件 - > event._id（_fc1，_fc2 ...等）

每個事件由一個錨定標記（）代表。橫跨週末的事件由2個錨標籤表示。每個事件的唯一標識符不會通過fullcalendar.js在html中輸出，因此不可能看到哪些錨與哪些事件相關聯。

我做一個小的變化，以fullcalendar.js這增加了每個事件到正在生成錨的唯一ID（作爲額外的CSS類名）

這意味着，與事件相關聯的所有的錨標籤可以是使用JQuery類選擇器在mouseover事件中選擇。

eventMouseover: function (event, jsEvent, view) {    
     $("." + event._id).each(function (index) { 
      $(this).css('border-color', 'yellow'); 
     }); 
    },

對我的作品！

來源

2011-09-20 14:23:51 aoifeL

你做了什麼改變？ – execv

@Nathan在fullcalendar.js文件中，我進行了以下更改：在函數daySegHTML（segs）中，我對輸出event.title的span進行了更改，以包含獨特的事件id（event._id）作爲css類。通過這種方式，可以使用JQuery類選擇器（查看上面添加的eventMouseover函數）來選擇spanning事件的定位標記。 '「」+ htmlEscape（event.title）+「」' – aoifeL

感謝分享:) – Boldbayar

有可能是一個更好的辦法，但我發現，不接觸源的方式：

添加一個獨特的css類爲每個事件。
渲染時，即使事件在週末延伸，該類也會應用於所有分段。
當用戶點擊一個事件：

$("." + calEvent.className).addClass('red');

邊注：當您將一個事件，其他段，屬於同一事件，是隱藏的，所以fullCalendar是知道的其他細分市場，但我還沒有找到通過API訪問它們的方法。

來源

2015-06-19 17:20:52

突出顯示鼠標懸停週末的事件

回答

相關問題