日历

Question

Rustam帮助Arshaw建造了一个非常棒的角度模块！过来看。与Angular 7一起工作。

我以前在实现下面的FullCalendar时遇到问题。我想你们也需要更新一下。

如何使用Angular 5正确实现fullcalendar而不出现任何错误？我试图将其实现到一个特定的组件中。我安装了以下软件包

• jquery

仅供参考，下面的帖子是我找到的最接近解决方案。我遵循了指令，但仍然出现了“JQueryPromise”错误。请告知

从jquery事件回调函数

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;

应用程序。组成部分html

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

应用程序。组成部分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 service'时

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'.

这个兔子洞的新发展

刚刚尝试创建一个新的组件“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

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

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

此问题已在完整日历问题跟踪程序中提出(https://github.com/fullcalendar/fullcalendar/issues/3991)

Answer 2

因此，似乎在*中有什么不对劲。d、 ts节点\模块文件夹中的文件。我在GitHub项目中打开了一个问题

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

我进入替换相应的问题类型与'any'：

节点\模块/fullcalendar/dist/fullcalendar。d、 ts
节点\u模块/fullcalendar调度程序/dist/scheduler。d、 ts

'JQueryPromise'
'JQueryEventObject'
'JQueryAjaxSet'

具有讽刺意味的是，在修复后，我也不再有“拒绝加载字体”的问题。我无法对此发表评论。我所知道的只是它在正常工作。

节日快乐！

Answer 3

由于您提出的GitHub问题，您遇到的问题现已修复。

我相信运行npm安装--save-dev@type/jQuery会正确地修复这个问题，因为我遇到了同样的问题，运行这个就成功了（在我找到这篇文章和GitHub问题的链接之后）。

引用GitHub上的修复程序：“现在文档中已经说明了这一点：https://fullcalendar.io/docs/typescript/"