fullcalendar - 角度日历指令未在 jquery 选项卡中呈现

Question

关于角度日历指令的另一个问题。我需要在一页上显示多个日历，并且正在使用 jquery 选项卡小部件。但是，只有一个日历可以正确呈现。在普通的 jquery fullCalendar 中，您使用 'render' 方法来确保在选择选项卡时显示日历。但是，这似乎不适用于 angular-ui 日历指令。

这是一个显示我的意思的plunker。删除 $().tabs() 和三个角度日历显示就好了。将它们包装在标签中，它不再起作用：

http://plnkr.co/edit/HEEX4iqb8kFAsjwdGmkM

关于为什么这不起作用以及如何解决它的任何想法？

谢谢！

PS。我将在 Google Groups 中交叉发布这个问题。谢谢。

Answer 1

似乎尽管有 fullCalendar 文档，但“显示”并不是触发 fullcalendar('render') 的地方。我应该说，至少在使用 Angular 时不会。我不知道在正常的 jQuery 使用下这是否正确。请改用“激活”事件：

$("#tabs").tabs({
  activate: function(){
    ("#calendar").fullCalendar('render');
  }
});

http://plnkr.co/edit/HEEX4iqb8kFAsjwdGmkM

Answer 2

渲染时使用超时。

<tab heading="{{tabs[0].title}}" active="tabs[0].active" select="renderCalendar()" disabled="tabs[0].disabled">


     $scope.renderCalendar = function() {
               $timeout(function(){
                    $('.calendar').fullCalendar('render');
                }, 0);
        };