bootstrap popover位于fullCalendar中的单元格下？

Question

我正在使用fullCalendar和bootstrap 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>

这就是它的样子

我曾尝试过z-index弹出窗口,相反,他们根本没有出现!

请帮忙!感谢您的时间!

编辑:这是测试它的链接

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