全日历 & Angular 5

Question

（新新编辑）

Rustam 帮助 Arshaw 构建了一个很棒的 Angular 模块！一探究竟。适用于 Angular 7.

https://fullcalendar.io/docs/angular

（新编辑）

我用 FullCalendar 实现了 Angluar 5 @Alpha Release。

我之前在将 FullCalendar 实施到下面的 Angular 时遇到了问题。我想你们可能也想要更新。

如何正确地使用 Angular 5 实现全日历而不出现任何错误？我正在尝试将其实现到特定组件中。我安装了以下软件包

jquery
时刻
全日历
全日历调度程序

仅供参考，下面的 post 是我找到的最接近的解决方案。我按照说明进行操作，但仍然收到 'JQueryPromise' 错误。请提前告知并感谢！

Callback angular function from jquery event

package.json

 "fullcalendar": "^3.8.0",
 "fullcalendar-scheduler": "^1.9.1",
 "jquery": "^3.2.1",
 "moment": "^2.20.1",

.angular-cli.json

 "styles": [
    "styles.css",
    "../node_modules/fullcalendar/dist/fullcalendar.min.css",
    "../node_modules/fullcalendar-scheduler/dist/scheduler.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/moment/min/moment.min.js",
    "../node_modules/fullcalendar/dist/fullcalendar.min.js",
    "../node_modules/fullcalendar-scheduler/dist/scheduler.min.js"
  ],

main.ts

import * as jQuery from "jquery";
(window as any).$ = (window as any).jQuery = jQuery;

app.component.html

<div id='calendar'></div>

app.component.ts

import { Component } from '@angular/core';
import 'fullcalendar';
import 'fullcalendar-scheduler';
declare let $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngOnInit() {
    $('#calendar').fullCalendar({});
  }
}

我虔诚地按照所有步骤操作，但我仍然遇到错误。具有讽刺意味的是，当我刷新页面时它能够加载并且我可以绕过该错误，但它仍然存在，尤其是当我第一次运行 'ng serve'

ERROR in node_modules/fullcalendar/dist/fullcalendar.d.ts(695,36): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(696,29): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(697,20): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(759,22): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(775,50): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(988,23): error TS2304: Cannot find name 'JQueryEventObject'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(1401,70): error TS2304: Cannot find name 'JQueryAjaxSettings'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(1603,50): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(1623,50): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(2588,50): error TS2304: Cannot find name 'JQueryPromise'.

New development down this rabbit hole

刚刚尝试创建一个新组件 "schedule.component" 并将所有内容移到那里，但现在我收到以下错误

Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAGVUABEAAAAAxuQAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABgAAAAC4AAAA0ArgC7UdQT1MAAAGwAAAQ6AAALgxKsqRTR1NVQgAAEpgAAAH3AAAELqI5y+RPUy8yAAAUkAAAAE8AAABgaGyBu2NtYXAAABTgAAABlAAAAkQkRATXY3Z0IAAAFnQAAABeAAAAugDsQf1mcGdtAAAW1AAABZcAAAvNb3/BHGdhc3AAABxsAAAACAAAAAgAAAAQZ2x5ZgAAHHQAAEApAAB3CtbiupxoZWFkAABcoAAAADYAAAA2BkubWWhoZWEAAFzYAAAAIAAAACQHFARfaG10eAAAXPgAAAI6AAAEEk4TN4Nsb2NhAABfNAAAAhIAAAISiLhpam1heHAAAGFIAAAAIAAAACACigzgbmFtZQAAYWgAAACUAAABHhQGLdJwb3N0AABh/AAAAq4AAASRk5y6n3ByZ...QxUajCCFt4p9HP4fzdSWs2XhWl5HvJazrIrFUyB0l5dpqcW10lV2wukjMLuAvyMHNiYpgPsrCVXZDKrkpll6UWkh7kABVAFVCDe7UFmxagDegA+hLHRPbqtMo7ZHCpKdT6tPGXybzo0+RXBLoPZt1tELcXxCmAAyZwYTJvdDFZKnDER44X2451rDqCyunIsRWvLSx6wnWqwPj/uX5/KuEy6DL0z6A/Fn79VihxMFJsrlAFy4DpZOcvNlMeNp+BRDLj0r+XFdRxdSNSNxiI/AL3ojKdAAB4AWPw3sFwIihiIyNjX+QGxp0cDBwMyQUbGdictkUwWDAwsDJogTgOPN4c9iz6bMos4iysHFChUDZXJnMWTSZZJrAQt9M+YQYBBh4GTgY2kEZOoJiA0z4GBxiEiDEzuGxUYewIjNjg0BGxkTnFZaMaiLeLo4GBkcWhIzkkAqQkEggceHw5HFkM2VRZJFlYebR2MP5v3cDSu5GJwWUDW9xG1hQXAFAmKZU=' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

Answer 1

因此 node_modules 文件夹中的 *.d.ts 文件似乎有问题。我在 GitHub 项目

中打开了一个问题

https://github.com/fullcalendar/fullcalendar/issues/3991

我将相应的问题类型替换为 'any':

node_modules/fullcalendar/dist/fullcalendar.d.ts
node_modules/fullcalendar-scheduler/dist/scheduler.d.ts

'JQueryPromise'
'JQueryEventObject'
'JQueryAjaxSettings'

具有讽刺意味的是，在解决该问题后，我也不再遇到 "Refuse to load font" 问题。无法评论那个。我所知道的是它正在正常工作。

节日快乐！

Answer 2

您的项目不包含 jquery 类型。尝试使用此命令添加它们

npm install --save-dev @types/jquery@3.2.7

此问题已在完整日历问题跟踪器 (https://github.com/fullcalendar/fullcalendar/issues/3991)

中提出

Answer 3

由于您提出的 GitHub 问题，您遇到的问题现已解决。

我相信运行 npm install --save-dev @types/jquery 会正确解决这个问题，因为我遇到了同样的问题，并且运行成功了（在我发现这个 post link 到 GitHub 问题）。

引用 GitHub 上的修复："this is now accounted for in the docs: https://fullcalendar.io/docs/typescript/"

Answer 4

您好，我知道这是一个老问题，但是这个 npm install --save-dev @types/jquery 对我不起作用。更快的解决方案是：

在 Tools>NuGet Package Manager> Manage NuGet Packages for Solution
在搜索框中写：jquery.type
查找jquery.TypeScript.DefinitelyTyped包
在您的 Web 项目中安装
已解决

希望对和我有同样情况的朋友有所帮助

全日历 & Angular 5

fullcalendar & Angular 5

angular

typescript

fullcalendar

fullcalendar-scheduler

（新新编辑）

https://fullcalendar.io/docs/angular

（新编辑）

我用 FullCalendar 实现了 Angluar 5 @Alpha Release。