bootstrap popover находится под ячейками в fullCalendar?

Question

Я использую fullCalendar с загрузочными popovers. Цель состоит в том, чтобы добавить форму для добавления нового события внутри popovers. Код делает popover выше над ячейками, однако при нажатии на popovers ячейки под ним выбираются, а не сами popovers.

Вот мой код:

$(document).ready(function() { 

    var date = new Date(); 
    var d = date.getDate(); 
    var m = date.getMonth(); 
    var y = date.getFullYear(); 
    var calendar = $('#calendar').fullCalendar({ 
     height: height, 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     dayClick: function(date, allDay, jsEvent, view){ 
      if (view.name=='month'){ 
      $(this).children().popover({ 
     placement: 'right', 
     content: function() {return $("#popover-content").html();}, 
html : true, container: 'body' 
    }); 
    $('.popover.in').remove(); 
    $(this).children().popover('show'); 
.......... 

и HTML

<div id="popover-content" class="hide"> 
<form> 
    <input id="easyeventtitle" /> 
    </form> 
</div> 

This is how it looks like

Я попытался z-index к Popovers, вместо этого, они не появляются на всех!

Пожалуйста, помогите! Спасибо за ваше время!

Edit: here is the link to test it

Answer 1

Попробуйте этот код

$(document).ready(function() { 
    $('#calendar').fullCalendar({   
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay', 
    }, 
    events: '/events.json', 
    editable: true, 
    selectable: true, 
    dayClick: function(start, end, allDay, jsEvent, view) {    
    $(this).popover({ 
       html: true, 
       placement: 'right', 
       title: function() { 
        return $("#popover-head").html(); 
       }, 
       content: function() { 
        return $("#popover-content").html(); 
       }, 
       html: true, 
       container: 'body' 
      }); 
    $(this).popover('toggle'); 
    }  
}); 
});