twitter-bootstrap 完整日历未显示在引导模式内
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20330166/
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
Full calendar not showing inside bootstrap modal
提问by Apostolos
I want to load a modal dialog using bootstrap modal. Inside of it i want to show a fullcalendar (the jquery one) with some events on it. I have created my modal, and put inside the full calendar. But Full calendar won't show when modal appears. But it shows when after the modal has appeared i press on either next or previous buttons. But then no event appears on the calendar.jsfiddle hereand code
我想使用引导模式加载模式对话框。在它里面，我想显示一个完整的日历（jquery 的），上面有一些事件。我已经创建了我的模态，并放入了完整的日历中。但是当模态出现时，完整的日历不会显示。但它显示在模态出现后我按下下一个或上一个按钮。但随后日历上没有出现任何事件。jsfiddle在这里和代码
<a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Launch demo modal</a>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-6">
<div id="calendar"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
js
js
$("#calendar").fullCalendar({
header:{
left:'prev',
center:'title',
right:'next'
},
events:'/eventsfeed/',
defaultView:'agendaDay'
});
That also make events not to appear on calendar. This is what my /eventsfeed is returning
这也使事件不会出现在日历上。这就是我的 /eventsfeed 返回的内容
[{"url": "/calendar/entry/223", "start": "2013-12-04T17:00:00Z", "end": "2013-10-04T16:45:00Z", "description": "a body", "title": "Title entry"}]
I use fullcalendar in different pages of my project and events and everything render normally.
我在我的项目和事件的不同页面中使用 fullcalendar，一切正常呈现。
How can i make it load when modal appears
出现模态时如何使其加载
回答by BENARD Patrick
You should try this :
你应该试试这个：
$('#myModal').on('shown.bs.modal', function () {
$("#calendar").fullCalendar('render');
});
Here is your fiddle : http://jsfiddle.net/mzAEj/2/
这是你的小提琴：http: //jsfiddle.net/mzAEj/2/
Here is the documentation : http://arshaw.com/fullcalendar/docs/display/render/
这是文档：http: //arshaw.com/fullcalendar/docs/display/render/
FullCalender V4
全日历 V4
In reading the doc you can read that this command is deprecated,
在阅读文档时，您可以了解到此命令已被弃用，
You've to call calendar.render() is order to have the same behaviour
您必须调用 calendar.render() 才能具有相同的行为
代码摘录：
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ dayGridPlugin ]
});
calendar.render();
回答by Talha Nazir
You can use the this approach.
您可以使用这种方法。
After the loading of .modal trigger the MONTH, DAY or WEEK button of the Calendar.
加载 .modal 后触发日历的 MONTH、DAY 或 WEEK 按钮。
$('.modal').focus(function(){
$('.fc-month-button').trigger('click');
});
