javascript - bootstrap popover位于fullCalendar的单元格下？

Question

我正在使用带有引导弹出框的 fullCalendar。目标是在弹出框内附加一个用于添加新事件的表单。该代码确实使弹出框出现在单元格上方，但是，在单击弹出框时，会选择其下方的单元格而不是弹出框本身。

这是我的代码：

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