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 calendar or resize the browser window. This calendar is being loaded in a modal box initialised using angularstrap.

I appreciate the help.

Plunkr here: LINK

Modal HTML is in search_modal.html Calendar controller is:calendarCtrl.js Parent controller is search.js

Edit: After experiencing the same problem with google maps and a gallery I've attempted to implement I dont think this is a problem directly related to the calendar rather its more related to the modal box itself. Anything thats interactive and involves javascript does not scale properly according to the size of the modal box. Anyone have any ideas on how to fix this?

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

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

Answer 3

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 4

I faced the same problem with foundation tab. Where my calendar was in second tab. What I did was, when user is clicking on the tab I simulated "Today" button click within a setTimeout with very minimal delay. This solves my problem

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

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 7

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