fullcalendar not visible until button is clicked or window resized?

Question

I\'m using jquery full calendar with angularJS and angularstrap. The problem it seems is that the calendar will only display when I either click on one of the buttons in the

Answer 1

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.

Answer 2

Use settimeout function to delay load of the calendar then it will work.

Answer 3

You need to specify the height of the full calendar e.g.

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid' ],
    height: "parent"
  });
  calendar.render();
});

Answer 4

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.

Answer 5

I have made a custom directive and a factory to control when to show and hide the calendar. When calendarFactory.isVisible is set to true, you call fullCalendar's render function.

restrict: 'A',
    scope: true,
    link: function (scope, element, attrs) {
        scope.$watch(function (scope) {
            return calendarFactory.isVisible;
        }, function (newValue, oldValue) {
            if(newValue === true)
                $(element).fullCalendar('render');

---

Code snippet is remade from production and might not be entirely correct, but the idea is. You should use $scope.$emit and $scope.$on instead of $watch btw.

Solution #2 would be ui-calandar I'm using it now for our own project and it can be nice for quick intergration, but I would suggest your own custom directive for flexibility. We do things like double calendar views, clientside localization, custom selection background-color, custom header for navigating multiple views. If you need things like that, I suggest alternative #1. And I really don't know how to write directives. So don't get discouraged! The hardest part will be getting FullCalendar to render dynamically.

Answer 6

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');
});