Fullcalender mit bootstrap popover z-Index Problem

Question

Ich versuche, vollständige Kalender Scheduler und Bootstrap-Popover zu integrieren. Allerdings bekomme ich das UI-Problem damit.

Ich habe versucht, den Z-Index für Popover sowie für mein Popover-Innen-HTML. Nichts funktioniert.

Hier ist meine Geige Link https://jsfiddle.net/87977p1x/5/

Ein Klick auf Ereignis 2 Sie die popover sehen können. Hier ist der popover Code in fullcalander

eventRender: function (event, element) { 

        element.popover({ 
         trigger: "click", 

         title: '<div class="label label-lg label-primary col-xs-12">' + event.title + '</div>', 
         html: true, 
         content: '<div style="width:70px">My content goes here.. blahhh blahhhh<div><div> Some more content in this div having more nested HTML</div>', 
         template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>' 

        }); 
       } 

Versuchte viel für letzten 3 Tagen konnte nicht herausfinden, warum seine hinter der Veranstaltung gehen, auch wenn ich z-Index erhöhen ..

Answer 1

Basierend auf der anderen Frage Fullcalendar with Twitter Bootstrap Popover, bewarb ich mich container:'body' es funktioniert ..

element.popover({ 
        trigger: "click", 
        container:'body', 
        // other settings... 

       }); 

Working JSFiddle

Answer 2

Ich ziehe es vor, es an. Fc-Scroller anzuhängen, so dass der Popover mit dem Ereignis blättern wird, wenn der Kalender gescrollt wird.

   element.popover({ 
        trigger: "click", 
        container:$(element).closest('.fc-scroller'); 
       });