angular calendar directive not rendering in jquery tabs

Question

Yet another question about the angular calendar directive. I need to display multiple calendars on one page and am using the jquery tabs widget. However, only one calendar will render properly. In normal jquery fullCalendar, you use the 'render' method to ensure that the calendar shows when the tab is selected. However, this doesn't seem to be working with the angular-ui calendar directive.

Here is a plunker showing what I mean. Delete the $().tabs() and the three angular calendars display just fine. Wrap them in tabs, and it no longer works:

http://plnkr.co/edit/HEEX4iqb8kFAsjwdGmkM

Any ideas on why this is not working and how to fix it?

Thanks!

PS. I will cross-post this question in Google Groups. Thanks.

MyTimeFinder · Accepted Answer · 2013-02-16 01:23:15Z

1

It appears that despite the fullCalendar documentation, "show" is not the place to trigger a fullcalendar('render'). I should say, at least not when working with Angular. I don't know if that is correct under normal jQuery usage. Use the "Activate" event instead:

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

http://plnkr.co/edit/HEEX4iqb8kFAsjwdGmkM

answered Feb 16, 2013 at 1:23

MyTimeFinder

1,8074 gold badges24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ProLoser Over a year ago

Personally I would advocate using ui-event="active:'whatever()'}instead. We should probably also add a ui-refresh property to the calendar directive too. Feel free to open a bug ticket for the latter.

Godekere · Accepted Answer · 2015-07-21 16:39:59Z

0

Use timeout while rendering.

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


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

answered Jul 21, 2015 at 16:39

Godekere

3503 silver badges8 bronze badges

Collectives™ on Stack Overflow

angular calendar directive not rendering in jquery tabs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related