我在我的项目中使用fullCalendar。请看下面的小提琴，
1）第一列是星期，剩下的列是天。
2）在周列中，我显示了一些随机数。不要考虑几天。
3）当我将鼠标悬停在那周的数字上时，它将突出显示周五至下周四（总共7天）。
我的期望是：
1）当我将鼠标放在一周时＃34; td＆＃34;它会显示一个工具提示。
2）请检查小提琴，如果我在一周的随机数上鼠标移动，则不会突出显示星期五到星期四。
3）我的要求，当我鼠标悬停在随机数字上时，特别是＆＃34; td＆＃34;，它应该突出显示星期五到星期四。当我老鼠离开那个＆＃34; td＆＃34;那时我只需要隐藏那个亮点。
var weekRandom;
var dayRandom;
var eventsArray = [
];
var dayNames = [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday',
'Thursday', 'Friday', 'Saturday' ];
$('#calendar').fullCalendar(
{
editable : true,
weekNumbers : true,
allDaySlot : true,
weekNumberTitle : 'week',
eventLimit : true, // allow "more" link when too many events
selectable : true,
dayNamesShort : dayNames,
eventLimit : 1,
events : eventsArray,
cc_monthPrev : 0,
cc_monthNext : 2,
columnFormat : {
month : 'dddd', // Monday, Wednesday, etc
week : 'dddd, MMM dS', // Monday 9/7
day : 'dddd, MMM dS' // Monday 9/7
},
eventRender : function(event, element) {
var html = "<div style='float:right'>" + 'welcome'
+ "</div>" + "</div>";
element.append(html);
}
});
$("td.fc-day.fc-widget-content")
.each(
function(index) {
var random = Math.floor(Math.random() * 100);
dayRandom = $(this)
.append(
"</br><span style='font-size: 30px;font-weight: 600;color: green;'>"
+ random
+ "%</span></br><span>99,998</span><span>/</span><span style='font-weight:100'>99,999</span>");
});
$("td.fc-week-number.fc-widget-content").prepend(
"<span class='weekFormat' style='float:left'>WK</span>");
$("td.fc-week-number.fc-widget-content")
.each(
function(index) {
var random = Math.floor(Math.random() * 100);
weekRandom = $(this)
.append(
"<span class='weekNo' style='font-size: 20px;font-weight: 600;color: orange;'>"
+ random
+ "%</span>");
});
$("td.fc-week-number.fc-widget-content").find('.weekNo').each(function(){
$(this).on('mouseover',function(){
var weekNo = $(this).text();
var weekNoCustm = weekNo.replace(/[^0-9]/g, "");
console.log('weekNoCustm------'+weekNoCustm);
if(weekNoCustm>0){
$(this).parent('.fc-week-number ').siblings('.fc-fri').addClass('weekHilt');
$(this).parent('.fc-week-number ').siblings('.fc-sat').addClass('weekHilt');
$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-mon').addClass('weekHilt');
$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-tue').addClass('weekHilt');
$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-wed').addClass('weekHilt');
$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-thu').addClass('weekHilt');
$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-sun').addClass('weekHilt');
}
})
$(this).on('mouseleave',function(){
$(this).parent('.fc-week-number ').siblings('.fc-fri').removeClass('weekHilt');
$(this).parent('.fc-week-number ').siblings('.fc-sat').removeClass('weekHilt');
$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-mon').removeClass('weekHilt');
$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-tue').removeClass('weekHilt');
$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-wed').removeClass('weekHilt');
$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-thu').removeClass('weekHilt');
$(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-sun').removeClass('weekHilt');
})
});
$(".fc-toolbar").css("display", "none");
$(".fc-widget-content")
.on(
'mouseover',
function() {
$('#cal-info').addClass('hide');
var data = $(this).html();
var offset = $(this).offset();
$('#cal-info').css('left', offset.left);
$('#cal-info').css('top', (offset.top - 40));
$('#cal-info')
.html(
'<span class="zoomBy">Zoom By:</span>'
+ '</br></br>'
+ '<a href="dayResort.html" id="utilizationResortId" target="_blank">Resort</a>'
+ '</br>'
+ '<a href="dayResort.html" id="utilizationBrandId" target="_blank">Brand</a>'
+ '</br>'
+ '<a href="dayResort.html" id="utilizationRepoId" target="_blank">Repository</a>'
+ '</br>'
+ '<a href="dayResort.html" id="utilizationConsumerId" target="_blank">Consumer Type</a>');
//p.html( "left: " + offset.left + ", top: " + offset.top );
$('#cal-info').removeClass('hide');
});
$(".fc-week-number").on('mouseover', function() {
//$('#cal-info').addClass('hide');
});
$(".row").on('mouseleave', function() {
$('#cal-info').addClass('hide');
});body {
margin-top: 40px;
text-align: center;
font-size: 13px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
.tag{
background-color:grey;
color:#fff;
margin-left:0px;
margin-top:8px !important;
padding:3px;
max-height:90px;
overflow: visible;
position: fixed;
z-index:999;
}
.tag:after {
content: "";
border-top: 16px solid red;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
position: absolute;
bottom: -15px;
left: calc(50% - 10px);
}
#calendar {
width: 900px;
margin: 0 auto;
}
.weekHilt{
background: #1c90f3 !important;
}Start Date :<input type="text" id="endDate" name="end_datum" class="input_text" value="">
End date :<input type="text" id="endDate" name="end_datum" class="input_text" value=""></br></br></br></br>
<div id='calendar'></div>
<div class="tag hide" id="cal-info">
请帮帮我怎样才能做到这一点..
答案 0 :(得分：0)
这可能会解决您的问题
$("#calendar").on("mouseover", "tr.fc-week", function() {
$(this).addClass("active");
});
$("#calendar").on("mouseout", "tr.fc-week", function() {
$("#calendar tr.fc-week").removeClass("active");
});
并添加此CSS：
tr.active > td:not(:first-child) {
background-color: red;
}