1

I met a strange issue with ui-calendar when your calendar is first hid and then displayed. On Github, a similar issue was encountered but using tabs (which I don't use) : https://github.com/angular-ui/ui-calendar/issues/28

I edited a JsFiddle to explicit the issue : http://jsfiddle.net/fECuY/20/

<div ng-show="test">
      <div ng-controller="MainCtrl" ui-calendar="calendar" config="uiconfig.calendar" ng-model="events"></div>
</div>

If you click on the button, a second calendar should be displayed, but its 'header' only is render. If we try to render the calendar when the variable, linked to the ng-show attribute, is changed, the ng-show is not updated already, so even with a DOM manipulation, there is no way to call fullCalendar() on this element.

So how can I render properly my calendar when I want it to be displayed ?

Thanks in advance.

JE-DW
  • 13
  • 4

1 Answers1

3

The problem is with the way ng-show works. It is essentially using a display: none to hide the element. This creates issues with how the calendar shows itself. The solution is to use ng-ifinstead, which will generate the calendar when it is true. See the comment in the GitHub issue here.

taylorthomas
  • 91
  • 5