I am currently using fullcalendar.js in conjunction with Bootstrap 4 modal.
Whenever I click on a bootstrap4 button, a modal appears with the fullcalendar component displayed.
However, upon initial load, I encounter this issue:
https://i.sstatic.net/nniKI.png
Strangely enough, clicking on the next/prev buttons resolves the problem
https://i.sstatic.net/I8eIe.png
So, my question is how can I resolve this?
HTML code:
<body>
<div id="content">
<button id="btn-calendar" type="button" class="btn btn-dark" data-toggle="modal" data-target="#modal-calendar"><i class="fas fa-calendar-alt"></i></button>
<div class="modal fade" id="modal-calendar" tabindex="-1" role="dialog" aria-labelledby="modal-calendar-title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-calendar-title">Calendar</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="calendar"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- script tags -->
</body>
CSS code:
* {
margin: 0;
padding: 0;
}
html,
body,
#content {
width: 100%;
height: 100%;
}
#btn-calendar {
margin: 10px;
}