twitter-bootstrap 带有 Twitter Bootstrap Popover 的 Fullcalendar
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14158141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fullcalendar with Twitter Bootstrap Popover
提问by Merion
I am trying to get Fullcalendar working with twitter boostrap popovers.
if I click an event, i want to show some details in the popover.
So first added this lil snippet to Fullcalendar:
我正在尝试让 Fullcalendar 与 twitter boostrap popovers 一起工作。
如果我单击一个事件，我想在弹出窗口中显示一些详细信息。
所以首先将这个 lil 片段添加到 Fullcalendar：
eventClick: function(event, jsEvent, view) {
$this = $(this);
$this.popover({html:true,title:event.title,placement:'top'}).popover('show');
return false;
},
But now I run into 2 problems:
但是现在我遇到了两个问题：
- Fullcalendar is inside a div that has overflow:hidden or something, because the popover gets cut on the border of Fullcalendar. How do I fix that?
- Similar to problem 2 I would like to place the popover via a function on top, left, right or bottom depending on the position where the event is in the Fullcalendar grid. How can i do such a function?
- Fullcalendar 是在一个 div 里面有 overflow:hidden 什么的，因为 popover 在 Fullcalendar 的边界上被切掉了。我该如何解决？
- 与问题 2 类似，我想根据事件在 Fullcalendar 网格中的位置，通过顶部、左侧、右侧或底部的函数放置弹出框。我怎么能做这样的功能？
thanks!
谢谢！
回答by clemnt
From version 2.3 bootstrap now has a "container" option for popovers which appends the popover to a specific element.
从 2.3 版开始，bootstrap 现在有一个弹出窗口的“容器”选项，它将弹出窗口附加到特定元素。
just add {container:'body'}to append it to the body
只需添加{container:'body'}即可将其附加到正文中
$this.popover({html:true,title:event.title,placement:'top',container:'body'}).popover('show');
回答by dav
This code helped me
这段代码帮助了我
$('#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 version - 2.3.2, full calendar - 1.6.4
引导程序版本 - 2.3.2，完整日历 - 1.6.4
taken from https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/9pkC3_lodmY
取自https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/9pkC3_lodmY
回答by Artur Schens
Append the popover to the calendar container to scroll the popover with the calendar.
将弹出窗口附加到日历容器以随日历滚动弹出窗口。
$(jsEvent.target).popover({
html: true,
container:'#calendar',
placement: 'right'
});
回答by Reemi
For days ;
持续数天 ;
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');
},
For Events;
对于活动；
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();
}
});
},
In your 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>
