问尝试导入插件之前的完整日程库
EN

Stack Overflow用户

提问于 2020-06-06 23:28:30

回答 3查看 7K关注 0票数 15

我在我的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>

angular

fullcalendar

人脸识别特惠活动

精准实时的人脸检测、分析、识别等服务，在线、离线满足多样需求，可应用于智慧零售、智慧社区、在线娱乐等多种应用场景

回答 3

Stack Overflow用户

发布于 2020-07-07 06:09:05

为了解决这个问题，您需要在顶部导入日历核心库，然后需要在构造函数中初始化核心库，如下所示

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
  }
}

票数 17

Stack Overflow用户

发布于 2021-02-07 13:24:42

有一个更好的方法来处理这个问题：

在app.modules.ts中注册插件：

import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import bootstrapPlugin from '@fullcalendar/bootstrap';

FullCalendarModule.registerPlugins([ // register FullCalendar plugins
   dayGridPlugin,
   interactionPlugin,
   bootstrapPlugin
]);

...

但在calenderOptions中，你必须移除插件属性：

calendarOptions = {
-  plugins: [ dayGridPlugin, interactionPlugin, bootstrapPlugin],
   initialView: 'dayGridMonth',
...
}

票数 2

Stack Overflow用户

发布于 2021-08-24 23:32:12

我得到了同样的问题，并通过更改导入库的顺序修复了它。我所做的是在module.ts中的组件之前导入FullCalendarModule库，如下所示：

import { FullCalendarModule } from '@fullcalendar/angular'; 
import dayGridPlugin from '@fullcalendar/daygrid'; 
import interactionPlugin from '@fullcalendar/interaction';
    
import { MycalendarComponent } from './mycalendar/mycalendar.component';