Всплывающее событие рисует за календарной сеткой и числами

Question

Я использую FullCalendar версии 3.9.0. Ранее мы использовали гораздо более старую версию.

Для событий в календаре, когда вы щелкаете по ним, открывается всплывающее окно. Это окно рисует за линиями и числами сетки, и оно обрезается, если оно выходит за границы сетки (например, открытие четного правого края возле левого края приведет к тому, что любое всплывающее окно, которое простирается дальше влево, чем календарь, будет отрезать).

Мой календарь определен так:

$('#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));
}
});

Затем существует событие create popover, которое создает всплывающие окна (popovers) для каждого события ...

    function createPopover(event, el) {

    var title = event.title;
    var html = SomeMethodToGetHtmlContentsOfPopup();

    el.popover({
        'placement': "left",
        'html': true,
        'title': title,
        'content': html,
    });
}

Само всплывающее окно (popover) можно стилизовать с помощью CSS-файла .popover ...

#calendar .popover,
.large-chart .popover {
color: #333;
width: 340px;
z-index: 999 !important;
position: relative !important;
}

Я пробовал всевозможные комбинации стилей этого элемента управления .popover. Стили применяются так, как я их вижу при отладке. Я ожидаю, что положив z-index выше, чем любые другие элементы и используя position: родственник должен вынести это на передний план, но это не так.

Есть идеи? Примеры, которые я видел в сети, похоже, не имеют этой проблемы, просто то, что я делаю.