(New New Edit)

Rustam has helped Arshaw build an Angular module that is awesome! Check it out. Works with Angular 7.

angular

(New Edit)

I implemented Angluar 5 with FullCalendar @Alpha Release.

I was previously having issues implementing FullCalendar to Angular below. I thought you guys might want an update as well.

How can I properly implement fullcalendar with Angular 5 without any errors? I am trying to implement it into a specific component. I installed the following packages

jquery
moment
fullcalendar
fullcalendar-scheduler

FYI, the post below is the closest that I've come to finding a solution. I followed the instruction, but I still get that 'JQueryPromise' error. Please advise & thanks in advance!

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({});
  }
}

I followed all the steps religously, but I am still getting error. Ironically, it is able to load when I refresh the page and I can get around that error, but it still persists, especially when I first run '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

Just tried creating a new component "schedule.component" and move everything there, but now I'm getting the following errors

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.

The issue you were having has now been fixed thanks to the GitHub issue you raised.

I believe running npm install --save-dev @types/jquery will correctly fix this issue as i have encountered the same problem, and running this did the trick (after i found this post and the link to the GitHub issue).

to quote the fix on GitHub: "this is now accounted for in the docs: https://fullcalendar.io/docs/typescript/"

So it seems as though there is something wrong in the *.d.ts files in the node_modules folder. I've opened an issue in the GitHub project

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

I went into the replaced the corresponding issues type with 'any':

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

'JQueryPromise'
'JQueryEventObject'
'JQueryAjaxSettings'

Ironically, after fixing that I am no longer having the "Refuse to load font" issue either. Cannot comment on that one. All I know is that it's working as it should.

Happy holidays!

Your project doesn't contains jquery typings. Try to add them using this command

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

This issue has been raised on full calendar issue tracker (https://github.com/fullcalendar/fullcalendar/issues/3991)

Hi I know that it is an old question but this npm install --save-dev @types/jquery doesn't worked for me. The faster solution was:

Open the Manage NuGet Packages for Solution (The visual option of Package Manager) at Tools>NuGet Package Manager> Manage NuGet Packages for Solution
Write in the search box: jquery.type
Find jquery.TypeScript.DefinitelyTyped package
Install inside your Web project
Solved

I hope this may have helped those who were in the same situation as me.

来源：https://stackoverflow.com/questions/47950588/fullcalendar-angular-5

标签

angular