Event pop-up is drawing behind calendar grid and numbers - css

Question

I am using FullCalendar version 3.9.0. We had previously been using a much older version.
For the events in the calendar, when you click them, it opens a pop-up window. This window is drawing behind the grid lines and numbers and it gets cut off if it goes beyond the bounds of the grid (for example opening an even right near the left edge would cause any of the popup that extends further left than the calendar to be cut off).
My calendar is defined like so:
$('#calendar').fullCalendar({
locale: initialLocaleCode,
height: "auto",
contentHeight: "auto",
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
loading: function(isLoading) {
if (isLoading) {
isCalClick = true;
} else {
isCalClick = false;
}
},
events: function (start, end, timezone, callback) {
$.ajax({
url: homeUrl + 'Run',
type: "GET",
dataType: "JSON",
success: function (result) {
var events = [];
$.each(result.Events, function (i, data) {
events.push(
{
moduleId: data.moduleId,
title: data.title,
id: data.id,
timeStamp: data.timeStamp,
state: data.state,
user: data.user,
result: data.result,
start: moment(data.start).format('YYYY-MM-DD'),
end: moment(data.timeStamp).format('YYYY-MM-DD')
});
});
callback(events);
},
error: function () {
alert('there was an error while fetching events!');
}
});
},
eventRender: function (event, element) {
createEvent(event, $(element));
}
});
Then there is a create popover event that creates popups (popovers) for each event...
function createPopover(event, el) {
var title = event.title;
var html = SomeMethodToGetHtmlContentsOfPopup();
el.popover({
'placement': "left",
'html': true,
'title': title,
'content': html,
});
}
The popup (popover) window itself can be styled with the .popover CSS...
#calendar .popover,
.large-chart .popover {
color: #333;
width: 340px;
z-index: 999 !important;
position: relative !important;
}
I've tried all sorts of combinations of styling this .popover control. The styles do apply as I see them when debugging it. I would expect putting z-index higher than any other items and using position:relative should bring this to the front but it does not.
Any ideas? The examples I've seen running online don't seem to have this issue, just what I'm doing.