fullcalendar not visible until button is clicked or window resized?

Just to add another answer to this. I was using fullcalendar in a bootstrap tab. In order to render the calendar, I added:

$('a#id-of-tab').on('shown.bs.tab', function (e) {
    $("#the-calendar-container").fullCalendar('render');
});

The problem is that the calendar is initialized while the modal is not visible. If the modal was in a controller, you could potentially use $scope.$on('modal-shown', function() {}); to somehow trigger calendar('render');.

I couldn't figure out a way to detect visibility. I tried using a $watch in the directive on elm.is(':visible'), but could only get it to check 2 times, when it loaded.

Your problem seems to be similar to How can I list two Linkedin Follow Buttons in a Twitter Bootstrap Dropdown

Your modal is set by:

 <a data-bs-modal="'search_modal.html'" href="#" class="ng-scope" data-target="#search_modal-003" data-toggle="modal">Search</a>
 <div id="search_modal-003" class="modal hide fade ng-scope in" tabindex="-1" aria-hidden="false">

Removing the display:none (give space) before the calendar insert will fix your problem. With the code above b.e. add #search_modal-003 {display:block; } to your custom css.