twitter-bootstrap 在dayClick上FullCalendar打开引导模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29072645/
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 open bootstrap modal on dayClick
提问by George
I want to open a bootstrap modal when users click on a day in fullCalendar. I have look over dayClick event but can't figure out how to call the model.
当用户在 fullCalendar 中单击一天时，我想打开一个引导模式。我查看了 dayClick 事件，但不知道如何调用模型。
dayClick: function(date, jsEvent, view) {
// call the model
},
Normal link to call a bootstrap model
调用引导程序模型的普通链接
<a href="#" data-toggle="modal" data-target="#myModal"..................../>
EDIT :
编辑 ：
I use only 1 bootstrap model for all my needs and simply change the content. The way I do this is by calling a href .. so my link looks like :
我只使用 1 个引导程序模型来满足我的所有需求，只需更改内容。我这样做的方法是调用 href .. 所以我的链接看起来像：
<a href="<?php echo site_url('model/add') ?>" data-toggle="modal" data-target="#myModal" role="button" class="btn-u btn-block"> Add</a>
回答by George
If someone else needs to open fullCalendar events in bootstrap model I found the way to do it :
如果其他人需要在引导模型中打开 fullCalendar 事件，我找到了这样做的方法：
Add :
添加 ：
eventClick: function(event, jsEvent, view) {
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#eventUrl').attr('href',event.url);
$('#calendarModal').modal();
},
And the model :
和模型：
<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
回答by Amina
The following should work:
以下应该工作：
dayClick: function(date, jsEvent, view) {
$("#myModal").modal("show");
},
Assuming that the ID of your modal is in fact myModal. .modal()is the JavaScript method used by bootstrap to manipulate modals... Similarly, you can close the modal using $("#myModal").modal("hide")...
假设您的模态 ID 实际上是myModal. .modal()是 bootstrap 用来操作模态的 JavaScript 方法...同样，您可以使用$("#myModal").modal("hide")...
回答by h3n
Another way is upon calendar redering:
另一种方法是在日历重新分配时：
eventRender: function(event, element) {
element.attr('data-toggle', "modal");
element.attr('data-target', "#sched-modal");
element.attr('href', "/details");
}
回答by Bruce Tong
i've got the same issue but for some reason, only the 'text' method worked for me.
我遇到了同样的问题，但出于某种原因，只有“文本”方法对我有用。
$('#calendar').fullCalendar({
dayClick: function(date, jsEvent, view) {
alert('Clicked on: ' + date.format());
$('#modalTitle').text(date.format());
$('#fullCalModal').modal('show');
}
});
