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>

This is how it looks like

我已经尝试过z-index来填充它们，相反，它们根本没有出现！

请帮忙！谢谢你的时间！

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

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

1 个答案: