现在安装了FullCalendar版本3.9.0(以前版本3.4.0)的现有网站,用于显示各种Google日历中的内容,在点击事件时不再显示事件弹出窗口以显示完整的事件描述。而是忽略以下代码:
eventClick: function(calEvent, jsEvent, view) {
showEventInformation(calEvent);
// Prevent redirect to Google Calendar
return false;
}
我想知道eventRender是否能够显示事件信息?我对当前FullCalendar Docs的搜索没有透露任何显示如何实现这一目标的信息,或者是否可以实现。我不确定如何整合/利用我发现的唯一代码:
eventRender: function(event, element) {
element.qtip({
content: event.description
});
}
非常感谢任何协助。
答案 0 :(得分:1)
解决方案是使用popper.js,如下所示:
eventRender: function(eventObj, $el) {
$el.popover({
title: eventObj.title,
content: eventObj.description,
trigger: 'hover',
placement: 'top',
container: 'body'
});
},
再次感谢ADyson的所有帮助。
答案 1 :(得分:0)
澄清并避免任何混淆:使用以下代码为单个日历实现了呈现弹出工具提示的解决方案:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='/css/fullcalendar.min.css' rel='stylesheet' />
<link href='/css/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='/js/lib/moment.min.js'></script>
<script src='/js/lib/jquery.min.js'></script>
<script src='/js/fullcalendar.min.js'></script>
<script src='/js/gcal.min.js'></script>
<style>
html, body {
margin: 0;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 40px auto;
}
#calendar a.fc-event {
color: #fff; /* bootstrap default styles make it black. undo */
}
</style>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css' rel='stylesheet' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js'></script>
<script>
$(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listYear'
},
displayEventTime: false, // don't show the time column in list view
googleCalendarApiKey: 'MyAPIkey',
// Single Calendar
events: {
googleCalendarId: 'gCalID-1',
color: 'green', // an option!
textColor: 'black', // an option!
className: 'my-event-1
},
eventRender: function(eventObj, $el) {
$el.popover({
title: eventObj.title,
content: eventObj.description,
trigger: 'hover',
placement: 'top',
container: 'body'
});
}
});
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>