Looking for assistance in integrating fullcalendar with Angular 5 seamlessly? Trying to implement it into a specific component and have already installed necessary packages:
- jquery
- moment
- fullcalendar
- fullcalendar-scheduler
Referencing this post on Stack Overflow as the closest solution found so far. Followed instructions but still encountering 'JQueryPromise' error. Appreciate any advice, thank you!
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({});
}
}
Despite following all steps diligently, errors persist. Can load after page refresh, but issues arise especially when first running '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 - continued list of errors)
Tried moving everything to a new component "schedule.component" but now facing additional errors:
Refused to load the font data:font/woff;base64,d09GRgABAAAAAGVUABEAAAAAxuQAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAAB .... (truncated for brevity) ... GxiEiDEzuGxUYewIjNjg0BGxkTnFZaMaiLeLo4GBkcWhIzkkAqQkEggceHw5HFkM2VRZJFlYebR2MP5v3cDSu5GJwWUDW9xG1hQXAFAmKZU= because it violates Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.