Search code examples
angularscheduleangular-cliprimengfullcalendar-scheduler

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


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.


Solution

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