Question

加载脚本core / main.js，daygrid / main.js，daygrid / main.css，core / main.css并在加载时出现以下错误

未捕获的TypeError：非法调用抛出于https://flow-momen enter image description here tum-5169.lightning.force.com/resource/1557998143000/PA_rSp__FullCalendar:6:1128

.......

import { LightningElement } from 'lwc';

import fullcalendar from '@salesforce/resourceUrl/FullCalendar';

import fullcalendarcss from '@salesforce/resourceUrl/fullcalendarcss';

import daygrid from '@salesforce/resourceUrl/daygrid';

import daygridcss from '@salesforce/resourceUrl/daygridcss';

  import { loadScript, loadStyle }

                    from'lightning/platformResourceLoader';

 export default class Lwccalendar extends LightningElement 
 {

    renderedonce=false;

    renderedCallback()

    {

       if(this.renderedonce===true)

       {

         return;

       }

       this.renderonce=true;

       alert("here");

       Promise.all([

       loadScript(this, fullcalendar),


       loadScript(this, daygrid ),


       loadStyle(this, fullcalendarcss),        
       loadStyle(this, daygridcss)
       ])
        .then(() => {
            alert("here");
            this.rendercalendar();
        }).catch(error => {

              alert(error.message);
        });



}

rendercalendar()
{
    alert("here");
    let calendarEl=this.template.querySelector(`[data-id="calendar"]`);
    alert("got the dom");
    const calendarobj = new FullCalendar.Calendar(calendarEl, {

      plugins: [ 'dayGrid' ]
      });

      calendarobj.render();
      alert("render complete");
    }

}

...

Answer 1

我怀疑这里可能有两件事发生： ~~1）我相信FullCalendar同时需要jQuery和moment.js。~~您还希望同时加载和 2）我怀疑在与基础库相同的Promise.all调用中加载dayGrid时，发生了一些奇怪的事情。请尝试以下方法：

Promise.all([
   loadScript(this, fullcalendar),
   loadStyle(this, fullcalendarcss)        
])
.then(() => {
    // load the FC plugin in the callback of the initial Promise.all
    Promise.all([
        loadScript(this, daygrid),
        loadStyle(this, daygridcss)
    ])
    .then(() => {
        this.rendercalendar();
    })
    .catch(error => {
        throw error;
    });
}).catch(error => {
    alert(error.message);
});

我对此也有疑问，但是按上述方式加载后我可以正常工作了。我不知道为什么会这样，因为Promise.all保证得到严格的订购。很奇怪！

edit：事实证明jQuery和Moment库仅在v4之前需要。另外，虽然上面的代码对我来说可以将FullCalendar插件加载到Lightning Web组件中，但是即使导入了 interaction ，我也无法使 selectable：true 正常工作插入。我最终恢复到FullCalendar的3.7.0版本，该版本效果很好（尽管 did 需要jQuery和Moment）。

Fullcalendar v4在闪电Web组件中加载时出现以下错误

1 个答案: