如何在 Angular 中初始化完整日历版本 4答案

【问题标题】：How to initialize Full Calendar version 4 in Angular如何在 Angular 中初始化完整日历版本 4
【发布时间】：2019-02-05 09:20:47
【问题描述】：

我正在尝试使用完整日历版本 4，以便在后台模式的事件上使用鼠标悬停事件。出于某种原因，我无法在我的组件中初始化它（设置选项），我的意思是它在我运行 ng serve 时工作，但我的 IDE 出现错误。我将在此处发布图片错误以及我的代码。您可以在此处查看官方文档https://fullcalendar.io/docs/v4/release-notes

我尝试使用 OptionInputs 作为参数，但没有成功

  import { Component, OnInit } from '@angular/core';
  import { DataService } from './../../shared/services/data.service';
  import 'fullcalendar';
  import { Calendar } from 'fullcalendar';

  @Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
  })
 export class CalendarComponent implements OnInit {
 constructor(private dataService: DataService) {}

 myEvents = [];

 transformDate(str: String) {
   return str.substr(0, 10);
 }
  ngOnInit() {
const calendarEl = document.getElementById('calendar');

const calendar = new Calendar(calendarEl, {
  events: [
    {
      title: 'Test A',
      start: '2018-10-09T16:00:00'
    }
  ]
});

calendar.render();

} }

【问题讨论】：

您的屏幕截图中存在错误。您没有输入plugins 参数...查看OptionInputs 以查看正确的选项结构。
@distante 我已经看到了，但不知道出了什么问题。导出接口 OptionsInput 扩展 OptionsInputBase { buttonText?: ButtonTextCompoundInput;意见？：{[viewId：字符串]：ViewOptionsInput； };插件：PluginDef[]; }
你能把错误的stackblitz放在一起吗？
@distante stackblitz.com/edit/angular-4wpwzc

标签： angular typescript fullcalendar fullcalendar-scheduler fullcalendar-4

【解决方案1】：

您正在以错误的结构编写选项对象，它需要一个插件属性

const calendar = new Calendar(calendarEl, {
  events: [
    {
      title: 'Test A',
      start: '2018-10-09T16:00:00'
    }
  ],
   plugins: []
});

Stackblitz

【讨论】：