Geek Answers Handbook

Fullcalendar does not output to bootstrap modal

I am trying to display fullcalendar in a modal dialog using bootstrap / jquery. When a modality appears, the calendar does not appear first unless the Today button is selected.

I read that I should use:

$("#calendar").fullCalendar('render');

This does not work.

I recreated the whole problem here. I used links for my links so you can see the problem if you run this script in 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>
+5
source share
1 answer

You are using the wrong method. Change show.bs.modal to 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 is called to show the modal, shown is called when the modal is shown, so using it allows you to display it when you open the modal.

+9
source

More articles:


All Articles