An existing site that now has version 3.9.0 (previously version 3.4.0) of FullCalendar installed that is used to display content from various Google calendars no longer displays the event pop-ups when an event is clicked on to display the full event description. Instead the following code is being ignored:
eventClick: function(calEvent, jsEvent, view) {
showEventInformation(calEvent);
// Prevent redirect to Google Calendar
return false;
}
I was wondering if eventRender is able to display the event information? My search of the current FullCalendar Docs has not revealed any information that shows how this may be achieved, or whether or not this is even possible. I'm not sure how to integrate/utilise the only code I've found:
eventRender: function(event, element) {
element.qtip({
content: event.description
});
}
Any assistance would be greatly appreciated.
The solution was to use popper.js as follows:
eventRender: function(eventObj, $el) {
$el.popover({
title: eventObj.title,
content: eventObj.description,
trigger: 'hover',
placement: 'top',
container: 'body'
});
},
Thanks again to ADyson for all the assistance.
To clarify and to avoid any confusion: the solution to rendering the pop-up tooltips was achieved for a single calendar using the following code:
<!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>
