引导弹出窗口位于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为popover，但是它们根本不会出现！

请帮忙！ 感谢您的时间！

编辑 ： 这是测试链接

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