ui-calendar

ui-calendar copied to clipboard

I made a plunker with the code from the demo, with angular 1.2 is working but with 1.3 the first time is not showing. This issue only happens when are inside a ui-bootstrap tabs.

http://plnkr.co/edit/atmJIY?p=preview

Is there any known work around for this? Trying to avoid migrating back to 1.2.x just for this issue.

+1

+1

Same issue here. On first render, its not there. This only happens with Angular 1.3.

+1

This is related to Angular 1.3/bootstrap/ and the calendar. Not 100% what it is. The calendar renders fine without being set in tabs. It also renders fine if inside a set timeout. So I think it has to be some type of async DOM issue related to how directives are compiled in 1.3.x, but not sure.

@joshkurz - Good to hear about the set timeout, I was thinking about trying something like that. In my scenario changing the date will trigger the cal to show.

yeah I think if we do something like this it might actually work without us doing anything. https://github.com/angular-ui/ui-calendar/pull/104

Any updates on this issue?

for now, i just use ,

    /* Change View */
    $scope.renderCalender = function (calendar) {
        if (uiCalendarConfig.calendars[calendar]) {
            console.log('.', uiCalendarConfig.calendars[calendar]);
            uiCalendarConfig.calendars[calendar].fullCalendar('render');
        }
    };

    $timeout(function () {
        $scope.renderCalender('calendar');
    }, 1000);

+1 I have this issue on angular 1.4.1 as well

+1 I'm using angular 1.4.3

I tried the v2 branch and this renders, but it doesn't seem to be updating the events when I change them. I'll see if I can look into it.

+1 I'm facing the exact same issue using angular 1.3 Any updates on this?

@devmark Thanks for your solution. I tried but it did not work for me.

you can read example. also u need to inject uiCalendarConfig

Thanks for your reply devmark.

I'm currently using this method to get my calendar to render the first time. Thought it might come in handy to anyone who is also facing this problem.

$scope.renderCalendar = function (calendarId) {
    $timeout(function () {
        calendarTag = $('#' + calendarId);
        calendarTag.fullCalendar('render');
    }, 0);
};

On tab select, the renderCalendar method is invoked. This method takes in a calendar ID which I set for my calendar, in this case, "someCalendarId", and I am forcing it to render the calendar based on the calendar id I passed in.

<div class="calendar" ng-model="eventsModel" calendar="myCalendar"
                             ui-calendar="uiConfig.calendar" id="someCalendarId"></div>

<tab select="renderCalendar('someCalendarId');">

@limjunyangleon your snippet it's a good way to solve this issue. :+1:

+1 @devmark your method worked for me

Couple things

I don't believe its necessary to do full render, 'rerenderEvents' works fine. From the console I did following:

$('div[ui-calendar]').fullCalendar('rerenderEvents');

Although @limjunyangleon your fix works, the angular purists will say do not do DOM manipulation in the controller. Of course when stuck in the mud, sometimes you don't have a choice.

For me, I was just using ng-show/hide to toggle between a list view of events and fullcalendar. Changing the ng-show to be ng-if was a much simpler means to my end.

None of the proposed solutions worked for me, but what DID work was to simply hide and then show the calendar div again after my events were loaded. Didn't even need to use a $timeout.

ie in the view:

<div ng-if="vm.showCal" class="calendar" ng-model="eventsModel" calendar="myCalendar" ui-calendar="uiConfig.calendar" id="someCalendarId"></div>

and in the controller:

vm.showCal = true // show the calendar initially

vm.loadCalendarEvents() // some async loader then(function() { vm.showCal = false; // hide the calendar vm.showCal = true; // show the calendar })

@gregory-h solution worked for me here is my code I am using the default demo code from angular ui-calendar

$scope.showCal = false

var init = function() { $timeout(function () { $scope.showCal = false; // hide the calendar $scope.showCal = true; // show the calendar }, 1000); }();