我正在使用fullcalendar 1.x。
在日历中，一些事件具有很长的标题，这是不完全可见的。我想完成的工作是扩展（在悬停，轻微延迟）到下一列，以显示.fc-content的完整内容。
我不确定我是否清楚地描述了它，但是在这里进行的演示，我想获得效果的模拟。（在模拟中，我动态添加了Colspan，只是为了展示我希望事件在悬停上的样子）。
这是脚本：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.3/fullcalendar.min.js"></script>
<script src="script.js"></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
firstDay: 1,
allDaySlot: false,
timeFormat: 'H:mm',
axisFormat: 'H:mm',
height: 650,
defaultDate: '2016-05-12',
editable: true,
displayEventEnd: {
month: true
},
eventLimit: true, // allow "more" link when too many events
events: [{
title: 'All Day Event',
start: '2016-05-01'
}, {
title: 'Long Event',
start: '2016-05-07',
end: '2016-05-10'
}, {
id: 999,
title: 'Repeating Event',
start: '2016-05-09T16:00:00'
}, {
id: 999,
title: 'Repeating Event',
start: '2016-05-16T16:00:00'
}, {
title: 'Conference',
start: '2016-05-11',
end: '2016-05-13'
}, {
title: 'Meeting',
start: '2016-05-12T10:30:00',
end: '2016-05-12T12:30:00'
}, {
title: 'Lunch',
start: '2016-05-12T12:00:00'
}, {
title: 'Meeting',
start: '2016-05-12T14:30:00',
start: '2016-05-12T18:30:00'
}, {
title: 'Happy Hour',
start: '2016-05-12T17:30:00'
}, {
title: 'Dinner',
start: '2016-05-12T20:00:00'
}, {
title: 'Birthday Party',
start: '2016-05-13T07:00:00'
}, {
title: 'Click for Google',
url: 'http://google.com/',
start: '2016-05-28'
}]
});
$('.fc-title').hover(function() {
$(this).parent().parent().parent().attr('colSpan', 2);
});
});
</script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.3/fullcalendar.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="calendar"></div>
</body>
</html>感谢提示！
我不太确定您正在寻找的效果，但也许这样的事情可能会对您有所帮助：
.fc-event-hover {
position: relative !important;
height: 17px;
}
.fc-event-hover .fc-content {
position: absolute !important;
top: -1px;
left: 0;
background: red;
z-index: 99999;
width: auto;
overflow: visible !important;
background-color: #3a87ad;
padding: 1px;
border-radius: 2px;
}
.fc-content-skeleton tr td:last-child .fc-event-hover .fc-content {
left: auto;
right: 0;
}<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.3/fullcalendar.min.js"></script>
<script src="script.js"></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
firstDay: 1,
allDaySlot: false,
timeFormat: 'H:mm',
axisFormat: 'H:mm',
height: 650,
defaultDate: '2016-05-12',
editable: true,
displayEventEnd: {
month: true
},
eventLimit: true, // allow "more" link when too many events
events: [{
title: 'All Day EventAll Day Event',
start: '2016-05-01'
}, {
title: 'Long Event',
start: '2016-05-07',
end: '2016-05-10'
}, {
id: 999,
title: 'Repeating Event',
start: '2016-05-09T16:00:00'
}, {
id: 999,
title: 'Repeating Event',
start: '2016-05-16T16:00:00'
}, {
title: 'Conference',
start: '2016-05-11',
end: '2016-05-13'
}, {
title: 'Meeting',
start: '2016-05-12T10:30:00',
end: '2016-05-12T12:30:00'
}, {
title: 'Lunch',
start: '2016-05-12T12:00:00'
}, {
title: 'Meeting',
start: '2016-05-12T14:30:00',
start: '2016-05-12T18:30:00'
}, {
title: 'Happy Hour',
start: '2016-05-12T17:30:00'
}, {
title: 'Dinner',
start: '2016-05-12T20:00:00'
}, {
title: 'Birthday Party',
start: '2016-05-13T07:00:00'
}, {
title: 'Click for Google',
url: 'http://google.com/',
start: '2016-05-28'
}]
});
$('.fc-event').mouseenter(function() {
$(this).addClass('fc-event-hover');
});
$('.fc-event').mouseleave(function() {
$(this).removeClass('fc-event-hover');
});
});
</script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.3/fullcalendar.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="calendar"></div>
</body>
</html> eventMouseover: function(event, jsEvent, view) {
var myTarget = $(jsEvent.target);
if (!myTarget.hasClass('fc-event')) {
myTarget = myTarget.closest('.fc-event');
}
myTarget.css("display","inline-table");
},
eventMouseout: function(event, jsEvent, view) {
var myTarget = $(jsEvent.target);
if (!myTarget.hasClass('fc-event')) {
myTarget = myTarget.closest('.fc-event');
}
myTarget.css("display","initial");
}
这有点黑客，但是当我遇到同一问题时，它实现了我所需要的。
我的代码与TimeGrid和FullCalendar V4
在他的专栏上显示了整个事件eventMouseEnter: function( mouseLeaveInfo ) {
var myTarget = $(mouseLeaveInfo.el);
if (!myTarget.hasClass('fc-event')) {
myTarget = myTarget.closest('.fc-event');
}
//myTarget.css("display","inline-table");
var oldch = myTarget.height();
myTarget.data("myheight", oldch);
var innerelem = myTarget.find(".fc-content").first();
innerelem.css('max-height', 'none');
innerelem.css('white-space', 'break-spaces');
var ih = innerelem.height();
if(oldch<ih){
myTarget.css('height', ih+'px');
}
},
eventMouseLeave: function( mouseLeaveInfo ){
var myTarget = $(mouseLeaveInfo.el);
if (!myTarget.hasClass('fc-event')) {
myTarget = myTarget.closest('.fc-event');
}
//myTarget.css("display","block");
var oldch = myTarget.data("myheight");
var innerelem = myTarget.find(".fc-content").first();
myTarget.css('height', oldch+'px');
innerelem.css('white-space', 'nowrap');
innerelem.css('max-height', '100%');
},