突出显示鼠标悬停周末的事件

我已经设置了我的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

突出显示鼠标悬停周末的事件

回答

相关问题