我在 Angular 9 项目中安装了 FullCalendar 5
然后我在浏览器控制台中收到此错误,并且页面中出现任何内容
vdom.js:3 Uncaught Error: Please import the top-level full calendar lib before attempting to import a plugin.
at Module../node_modules/@fullcalendar/common/vdom.js (vdom.js:3)
at __webpack_require__ (bootstrap:79)
at Module../node_modules/@fullcalendar/common/main.js (main.js:1)
at __webpack_require__ (bootstrap:79)
at Module../node_modules/@fullcalendar/daygrid/main.js (main.js:1)
at __webpack_require__ (bootstrap:79)
at Module../src/app/demo/demo.component.ts (demo.component.ts:1)
at __webpack_require__ (bootstrap:79)
at Module../src/app/Modules/app-routing.module.ts (app-routing.module.ts:1)
at __webpack_require__ (bootstrap:79)
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FullCalendarModule } from '@fullcalendar/angular'; // for FullCalendar!
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FullCalendarModule // for FullCalendar!
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
import dayGridPlugin from '@fullcalendar/daygrid';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
calendarOptions = {
plugins: [dayGridPlugin],
initialView: 'dayGridMonth'
};
}
<full-calendar [options]="calendarOptions"></full-calendar>
要解决此问题,您需要在顶部导入日历核心库,然后需要在构造函数中初始化核心库,如下所示
import { Component } from '@angular/core';
import { Calendar } from '@fullcalendar/core'; // include this line
import dayGridPlugin from '@fullcalendar/daygrid';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
calendarOptions = {
plugins: [dayGridPlugin],
initialView: 'dayGridMonth'
};
constructor() {
const name = Calendar.name; // add this line in your constructor
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)