Fullcalendar不会在引导模式中呈现
[英]Fullcalendar doesn't render in bootstrap modal
问题描述
我试图使用bootstrap / jquery在模式对话框中显示fullcalendar。 当模态出现时，除非选择“今天”按钮，否则日历不会显示。
我读过我应该使用：
$("#calendar").fullCalendar('render');
这似乎不起作用。
我在这里重现了整个问题。 我使用链接作为参考，因此如果您在Chrome中运行此脚本，则可以看到问题。
<!DOCTYPE html> <html> <head> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> <link href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css" rel="stylesheet"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" type="text/javascript"></script> <!-- IMPORTANT! fullcalendar depends on jquery-ui.min.js for drag & drop support --> <script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script> </head> <body> <a data-toggle="modal" id="add_appointment" href="#modal_form_addappt" class="btn btn-default btn-sm">Add... </a> <!-- /.modal --> <div class="modal fade" id="modal_form_addappt" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Add New Appointment...</h4> </div> <div class="modal-body"> <div id="calendar"></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> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> <script> $("#calendar").fullCalendar({ }); $('#modal_form_addappt').on('show.bs.modal', function () { $("#calendar").fullCalendar('render'); }); </script> </body> </html>
1 个解决方案
解决方案1
9 已采纳 2015-04-10 20:34:47
你使用的是错误的方法。 更改show.bs.modal到shown.bs.modal ：
<!DOCTYPE html> <html> <head> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> <link href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css" rel="stylesheet"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" type="text/javascript"></script> <!-- IMPORTANT! fullcalendar depends on jquery-ui.min.js for drag & drop support --> <script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script> </head> <body> <a data-toggle="modal" id="add_appointment" href="#modal_form_addappt" class="btn btn-default btn-sm">Add... </a> <!-- /.modal --> <div class="modal fade" id="modal_form_addappt" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Add New Appointment...</h4> </div> <div class="modal-body"> <div id="calendar"></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> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> <script> $("#calendar").fullCalendar({ }); $('#modal_form_addappt').on('shown.bs.modal', function () { $("#calendar").fullCalendar('render'); }); </script> </body> </html>
show被调用以显示模态， shown模态时显示，因此使用它可以在模式打开时显示。
fullCalendar 不在引导选项卡内呈现
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.