在尝试导入插件角度之前出错 fullcalendar lib

Question

我有这个错误：Error: Please import the top-level fullcalendar lib before attempting to import a plugin.当我将 resourceTimeGridPlugin 添加到插件时。我的代码：import dayGridPlugin from '@fullcalendar/daygrid';import interactionPlugin, { Draggable } from '@fullcalendar/interaction';import { FullCalendarComponent } from '@fullcalendar/angular';import timeGridPlugin from '@fullcalendar/timegrid';import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';

Answer 1

您必须在组件中包含 Calendar Core 对象：

import { Calendar } from '@fullcalendar/core';

在您的构造函数中，您必须添加以下内容：

 constructor() { 

    const name = Calendar.name; 

 }

完整示例：

import { Component } from '@angular/core';

import { Calendar } from '@fullcalendar/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'

  };

 constructor() { 

    const name = Calendar.name;

  }

}

这会在插件需要之前强制加载/初始化核心组件和 VDom 引用。

Answer 2

这就是我在我的项目中为解决这个问题所做的。

在我的模块中按此顺序导入并注册我的插件。

import { FullCalendarModule } from "@fullcalendar/angular";

import dayGridPlugin from '@fullcalendar/daygrid';

import interactionPlugin from '@fullcalendar/interaction';

import listPlugin from '@fullcalendar/list';

import momentPlugin from '@fullcalendar/moment';

import rrulePlugin from '@fullcalendar/rrule';

import timeGridPlugin from '@fullcalendar/timegrid';

FullCalendarModule.registerPlugins([

  dayGridPlugin,

  interactionPlugin,

  listPlugin,

  momentPlugin,

  rrulePlugin,

  timeGridPlugin

]);

在组件中，我在准备 calendarOptions 之前在构造函数中使用它

forwardRef(() =>Calendar);