Fullcalendar与Twitter Bootstrap Popover结合使用

Question

我正在尝试将Fullcalendar与Twitter Boostrap弹出框配合使用。
如果我点击一个事件，我希望在弹出框中显示一些细节。
所以我首先将这个小片段添加到Fullcalendar中：

eventClick: function(event, jsEvent, view) {
        $this = $(this);
        $this.popover({html:true,title:event.title,placement:'top'}).popover('show');
        return false;            
    },

但现在我遇到了两个问题：

1. FullCalendar位于具有overflow:hidden或类似属性的div中，因此弹出框被剪切在Fullcalendar边框上。我该如何解决这个问题？
2. 类似于问题2，我想通过一个函数在上方、左侧、右侧或下方放置弹出框，具体取决于FullCalendar网格中事件的位置。 我该如何编写这样的函数？

谢谢！

- Merion

---

如果您能提供一个Fiddle或页面链接，那就太好了。 - BillPull

对于第二点，我现在实现了一个次优解决方案，即如果事件发生在周日到周三之间，我将弹出框放置在右侧，否则放置在左侧。如果视图类型为Day或agendaDay，则将其放置在顶部。这样通常可以防止弹出框被任何东西遮挡。 - Petruza

Answer 1

从2.3版本开始，Bootstrap提供了用于Popover的“container”选项，可以将Popover附加到特定元素。

只需添加{container:'body'}即可将其附加到主体中。

$this.popover({html:true,title:event.title,placement:'top',container:'body'}).popover('show');

- clemnt

---

这很好用，除非你滚动日历，现在弹出框相对于主体保持相同的位置，但现在它与日历事件分离了。 - Petruza

Answer 2

这段代码帮了我一个大忙

$('#calendar').fullCalendar({
    eventRender: function (event, element) {
        element.popover({
            title: event.name,
            placement: 'right',
            content: + '<br />Start: ' + event.starts_at + '<br />End: ' + event.ends_at + '<br />Description: ' + event.description,
        });
    }
});

Bootstrap版本-2.3.2，完整日历-1.6.4

来自https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/9pkC3_lodmY

- dav

---

为了使HTML渲染，我还必须将“html:true”属性添加到popover中。 - Ciaran Gallagher

Answer 3

将弹出框附加到日历容器上，以便与日历一起滚动。

            $(jsEvent.target).popover({
                html: true,
                container:'#calendar',
                placement: 'right'
            });

- Artur Schens

Answer 4

几天；

        dayClick: function (date, jsEvent, view) {
            //return eventCreate(date, null, jsEvent, view);
            var CurrentDay = $(this);

            CurrentDay.popover({
                html: true,
                placement: 'auto',
                title: date.format(),
                container:'#calendar',
                content: function() {
                    setTimeout(function () {
                        CurrentDay.popover('hide');
                    }, 2000);
                    return $("#popover-day").html();
                }
            });
            CurrentDay.popover('toggle');
    },

关于事件;

        eventRender: function (event, element, view){
        var dStart = event.title
        element.popover({
            animation: true,
            placement: 'top',
            html: true,
            container: 'body',
            title: dStart,
            trigger: 'click',
            content: function() {
                setTimeout(function () {
                    element.popover('hide');
                }, 2000);
                return $('#popover-content').html();
            }
        });
    },

在你的HTML中；

<ul id="popover-content" class="list-group" style="display: none">
  <a href="#" id="Eventaaa" class="list-group-item" onclick="aaa();">aaa</a>
  <a href="#" id="Eventbbb" class="list-group-item" onclick="bbb();">bbb</a>
  <a href="#" id="Eventccc" class="list-group-item" onclick="ccc();">ccc</a>
</ul>

<ul id="popover-day" class="list-group" style="display: none">
  <a href="#" id="Dayaaa" class="list-group-item" onclick="fDayaaa();">aaa</a>
  <a href="#" id="Dayyyy" class="list-group-item" onclick="fDayyyy();">yyy</a>
  <a href="#" id="Dayxxx" class="list-group-item" onclick="fDayxxx();">xxx</a>
</ul>

- Reemi