Menu
I am trying to display fullcalendar in a modal dialog using bootstrap/jquery. When the modal appears the calendar doesn't show at first unless the 'Today' button is selected.
I read that I should use:
$("#calendar").fullCalendar('render');
This doesn't seem to work.
I recreated the whole problem here. I used links for my references 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>
461
You're 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 that allows it to display when the modal is opened.
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
