Calendar not rendering until date changed or window resize

[lyadeski]

Copied the sample directly from the http://angular-ui.github.io/ui-calendar/ page into my app. Only difference is my app uses UI-Router.

When page loads, no calendar is displayed, however the navigation buttons are such as the "today" button and the next and previous button. Click on any of the buttons OR resizing the window triggers the calendar to show. Can't figure out how to get the calendar to show on load w/ out doing the above.

[vubui]

Anything in the console?

[lyadeski]

Nope - no errors, everything appears fine. Works fine once i click one of the links. Can't get to show on load otherwise.

[cjgreen]

I am also experiencing the same issue.

[timcosta]

same issue here, except a window resize does not cause the render to occur.

This only occurs for me when my data is still loading when the view is first digested. The modifications I make to the source array after all of my data loads do not seem to take effect immediately.

[vubui]

Can someone create a plunker for this?

[gise88]

Hi all, I had the same issue but i've fixed changing the last function of .directive('uiCalendar', ...) like this:

scope.$watch(getOptions, function(newO, oldO) {
            scope.destroy();
            $timeout(function(){scope.init()}); // Be sure to include $timeout
          });

I know that is not a perfect solution, but it works.. ^^ This is the Plunker

[mortware]

changing the function worked for me - can't see any major performance issues with it.

[dougestey]

+1 on this issue. fixed in https://github.com/angular-ui/ui-calendar/issues/174#issuecomment-65009816.

[ashiquemohammed]

Any other solution for this ??

[aidarbuy]

I have same issue. Tried #174, but it still not rendering after page reload.

[aidarbuy]

Fixed by adding to scope.init:

setTimeout(function () {
  calendar.fullCalendar('render');
});

[fabrikate]

I have the same issue. I tried #174 comment and the suggestion above, but no fix yet.

[lnaia]

I've had to do what @aidarbuy did, but with a minimium of 100ms.

[ndevine]

In case anyone else is still facing this problem... here is the above suggestion for the current version of ui-calendar:

scope.$watch(getOptions, function(newValue, oldValue) {
          if(newValue !== oldValue) {
            scope.destroyCalendar();
            $timeout(function(){scope.initCalendar();}, 1000);
          } else if((newValue && angular.isUndefined(calendar))) {
            $timeout(function(){scope.initCalendar();}, 1000);
          }
        }); 

This is with a 1 second delay (1000ms). Unfortunately that's what I needed to get the events to render on load.

also make sure to add $timeout to the directive:

.directive('uiCalendar', ['uiCalendarConfig', '$timeout', function(uiCalendarConfig, $timeout)