PerfectScrollbar is not a function on FullCalendar

Question

I'm trying to apply the PerfectScrollbar on FullCalendar but I sadly got:

PerfectScrollbar is not a function

that's weird because in other place of my application the PerfectScrollbar is successful applied.

This is my implementation for FullCalendar:

 $calendar = $('#fullCalendar');

 $calendar.fullCalendar({
  viewRender: function(view, element) {
    // We make sure that we activate the perfect scrollbar when the view isn't on Month
    if (view.name != 'month') {
      $(element).find('.fc-scroller').perfectScrollbar();
    }
  }, ...

what I did wrong?

UPDATE:

This doesn't display the error:

var scroller = $(element).find('.fc-scroller')[0];
var ps = new PerfectScrollbar(scroller, {
            wheelSpeed: 2,
            wheelPropagation: true,
            minScrollbarLength: 20,
            suppressScrollX: true
          });

but doesn't show the PerfectScrollBar

Answer 1

The question is a bit old (9mo) but still relevant at least for others.

Problems were that 1, you were targeting the wrong ".fc-scroller" (there are indeed several) and 2, perfect-scrollbar's parent must have 'position:relative'.

FullCalendar v4:

import { Calendar } from '@fullcalendar/core';
import PerfectScrollbar from 'perfect-scrollbar'

const calendar = new Calendar(calendarEl, {
  viewSkeletonRender(){
    const el = document.querySelector('.fc-body .fc-time-area .fc-scroller')
     if (el) {
      el.style.overflow = 'hidden'
      el.style.position = 'relative'
      new PerfectScrollbar(el)
     }
  }
})

For v3, same snippet but using it inside the 'viewRender' method. just like @sfarzoso did.