鼠标悬停时,周突出显示不能正常工作
week highlight is not working properly on mouseover
我在我的项目中使用fullCalendar。请看下面的小提琴
jsfiddle
1)第一列为周,其余列为日。
2)在周列中,我显示了一些随机数字。不要考虑天数。
3)当我将鼠标悬停在那个星期的数字上时,它将突出显示该星期的星期五到下星期四(共7天)。
我的期望是:
1)当我把鼠标放在周"td"上时,它会显示一个工具提示。
2)请检查小提琴,如果我鼠标离开星期随机数,它不突出显示星期五到星期四。
3)我的要求,当我鼠标移到随机数和特定的"td"上时,它应该突出显示星期五到星期四。当我鼠标停留在"td"上时,我只需要隐藏那个高亮。
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">
这样可以解决你的问题吗
$("#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;
}
小提琴:http://jsfiddle.net/8ohxvz2o/1/
相关文章:
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- JS可以在Chrome中工作,但不能在Firefox中工作
- ajaxToolkit PopupControlExtender不工作.过时的
- HTML标记在脚本标记中工作
- javascript扫雷器floodfill算法不能正常工作