0

我正在尝试应用PerfectScrollbaronFullCalendar但我很遗憾地得到了：

PerfectScrollbar 不是函数

这很奇怪，因为在我的应用程序的其他地方PerfectScrollbar成功应用了。

这是我的实现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();
    }
  }, ...

我做错了什么？

更新：

这不会显示错误：

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

但不显示PerfectScrollBar

4

2 回答 2

2

这个问题有点老了（9mo），但至少对其他人来说仍然相关。

问题是 1，您的目标是错误的“.fc-scroller”（确实有几个）和 2，完美滚动条的父级必须具有“位置：相对”。

完整日历 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)
     }
  }
})

对于 v3，相同的代码段但在“viewRender”方法中使用它。就像@sfarzoso 所做的那样。

于 2019-11-14T18:22:27.653 回答
0

有点不那么优雅，但在 v5 中正确考虑了窗口大小调整。

    // Calendar attribute reset for perfectScrollbar
    const resetCalendarSizing = () => {
      const timeGrid = (<HTMLElement>document.querySelector('.fc-view-harness .fc-timegrid-body'));
      const dayGrid = (<HTMLElement>document.querySelector('.fc-view-harness .fc-daygrid-body-natural'));

      setTimeout(() => {
        if (timeGrid && dayGrid) {
          timeGrid.setAttribute('style', 'width: 100% !important');
          timeGrid.firstElementChild?.firstElementChild?.setAttribute('style', 'width: 100% !important');
          timeGrid.lastElementChild?.firstElementChild?.setAttribute('style', 'width: 100% !important');

          dayGrid.setAttribute('style', 'width: 100% !important');
          dayGrid.firstElementChild?.setAttribute('style', 'width: 100% !important');
        }
      }, 10);
    };

const calendar =  new Calendar(calendarEl.value!, {
        viewDidMount: () => {
          document.querySelectorAll('.fc-view-harness .fc-scroller')
            .forEach((element) => {
              if (element) {
                (<HTMLElement>element).style.overflow = 'hidden';
                const perfectScrollbar = new PerfectScrollbar(element);
              }
            });

          resetCalendarSizing();
        },
        windowResize: () => {
          resetCalendarSizing();
        },
});
于 2021-06-23T07:33:35.843 回答