Events not displaying with PrimeNG Schedule cannot read property scrollTop of null

Question

I am trying to use PrimeNG's Schedule component to display calendar events for users. The calendar displays, but when Fullcalendar tries to render the events it's returning an error:
"ORIGINAL EXCEPTION: TypeError: Cannot read property 'scrollTop' of null"
The events should be the correct format, as this project is just refactoring from an angular1 version that was already using Fullcalendar. Below I have included the html, config options, and a mock of the events trying to be displayed.

template.html

        <p-schedule id="calendar" class="calendar" [events]="calendar.sources" 
            [calendar]="myCalendar1" [height]="calendar.config.height"
            [header]="calendar.config.header" [editable]="calendar.config.editable"
            [weekends]="calendar.config.weekends" [eventLimit]="calendar.config.eventLimit"
            (onDayClick)="calendar.config.dayClick" (onEventClick)="calendar.config.eventClick"
            (onEventDrop)="calendar.config.eventDrop">
        </p-schedule>

this.calendar.config = {
  height: 900,
  editable: true,
  weekends: true,
  eventLimit: true,
  header: {
    left: 'agendaDay,agendaWeek,month',
    center: 'title',
    right: 'today prev,next'
  },
  dayClick: this.dayClick,
  eventClick: this.eventClick,
  eventDrop: this.stopDrag
}

It turns out that no matter what options I include, fullcalendar always gives the same error. I even tried loading the schedule template with no options and still had the same error. This seems to indicate that something about the way I included Schedule and fullcalendar is not correct. I included primeng and moment through npm install --save, then I include fullcalendar through html cdns. I followed the implementation changes shown here to get Schedule up and running. I then added Schedule as a provider and a directive to my current component. Schedule is also included in my class constructor so that I can reference it from within my component's methods.

score 2 · Accepted Answer · answered Jun 20 '16 at 14:20

2

It turns out that the updates to JQuery 3.0.0 are incompatible with Fullcalendar. By rolling JQuery back to 2.2.4 everything works properly.

answered Jun 20 '16 at 14:20

Isahiro

165
1
2
11

score 0 · Answer 2 · answered Oct 24 '16 at 22:14

I had the same problem with fullcalendar and Isahiro's answer was the solution. I just wanted to add that mine occured because a dependency conflict with bower upgraded jquery to 3.x on me. You can force bower to use a 2.x version by adding the following to bower.json.

"resolutions": {
   "jquery": "~2.1.4"
}

Events not displaying with PrimeNG Schedule cannot read property scrollTop of null

2 Answers2