"Cannot read property 'scrollTop' of null" Error

[youngcademy]

angular-ui-calendar make error below

angular.js:13920 TypeError: Cannot read property 'scrollTop' of null at constructor.getScrollTop (fullcalendar.js:9026) at members.constructor.queryScroll (fullcalendar.js:11873) at members.constructor.displayEvents (fullcalendar.js:8428) at renderEvents (fullcalendar.js:9761) at reportEvents (fullcalendar.js:9794) at fullcalendar.js:10659 at _fetchEventSource (fullcalendar.js:10708) at fetchEventSource (fullcalendar.js:10630) at fetchEvents (fullcalendar.js:10624) at fetchAndRenderEvents (fullcalendar.js:9785)(anonymous function) @ angular.js:13920

How Do I?

[putuyoga]

up, i have similar problem with this. also i can't show my event item, they just blinking, like displaying event item for milliseconds then disappeared.

[youngcademy]

Yes. I have same ploblem too. likewise I can't show events.

[youngcademy]

Do you resolve the problem?

[putuyoga]

i did not. Still searching workaround for this one.

[youngcademy]

okay. If I resolve this problem I write how resolve.

[putuyoga]

i solve this issue, by using older version of fullcalendar, instead latest version, i use v2.1.1.

[youngcademy]

Thank you. I solve too by you.

[ib1987]

It's working with fullcalendar 2.1.1 Please update your bower json and push to repository :) 👍

[nikhileshcs]

Any resolution for this issue? It is still replicable when there are events attached to the calendar. I am using latest version of the fullcalendar 3.0.1 with angular ui calendar of 1.0.1.

[salarelv]

Same here

[putuyoga]

@nikhileshcs just use the old version 2.1.1 instead the newer one

[nikhileshcs]

@putuyoga using the old version will also limit the functionality of the calendar and new features/fixes on the calendar cannot be used.

Instead i used $timeout wrapper to attach events to the scope model to solve this issue. The issue is due to the calendar is not yet rendered on the DOM but few operations are trying to get the scrollEl. Hence here am delaying the events assignment by using $timeout wrapper. @salarelv this might solve your issue for the newer version too.

[theblang]

@putuyoga The problem with using 2.1.1 is that I don't think it supports jQuery 3.x.

[wcmboy]

Yes. I have same ploblem too. likewise I can't show events.

[wcmboy]

Any resolution for this issue? It is still replicable when there are events attached to the calendar. I am using latest version of the fullcalendar 2.7.1 with angular ui calendar of 1.0.2.

[geovannyAvelar]

I've had the same problem with FullCalendar 2.7.1 and Angular UI calendar 1.0.2. I follow the @putuyoga advice and works now.

[david-hsn]

Hi @putuyoga @geovannyAvelar Can you please explain in more detailed how you implemented your $timeout wrapper that delays the events assignment. I'm new to all this. Thank you so much.

[Maryna-Yelakova]

I've had the same problem. @putuyoga advice solved this issue.

[shakisha]

we are struggling with this issue... also we cannot revert cause we use some new functionalities of calendar which are not available on new version.

any advice?

[qilab]

This comment https://github.com/angular-ui/ui-calendar/issues/340#issuecomment-293678056 may help you.

I solved it simply by doing an ng-if - it needs to wait til the data is there

<div ui-calendar ng-model="eventSources" ng-if="eventSources.length > 0"></div>

This solution is similar to the solution suggested by @nikhileshcs and simpler.