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.
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.