title: fullcalendar & Angular 5
body: <h3>(New New Edit)</h3>
  
  <p>Rustam has helped Arshaw build an Angular module that is awesome! Check it out. Works with Angular 7.</p>
  
  <h1><a href="https://fullcalendar.io/docs/angular" rel="nofollow noreferrer">https://fullcalendar.io/docs/angular</a></h1>
  
  <h3>(New Edit)</h3>
  
  <h1>I implemented Angluar 5 with FullCalendar <a href="https://github.com/estrellajm/angular5-fullcalendar" rel="nofollow noreferrer">@Alpha Release</a>.</h1>
  
  <p>I was previously having issues implementing FullCalendar to Angular below. I thought you guys might want an update as well.</p>
  
  <hr>
  
  <p>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</p>
  
  <ul>
  <li>jquery  </li>
  <li>moment   </li>
  <li>fullcalendar   </li>
  <li>fullcalendar-scheduler</li>
  </ul>
  
  <hr>
  
  <p>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 &amp; thanks in advance!</p>
  
  <p><a href="https://stackoverflow.com/questions/47870690/callback-angular-function-from-jquery-event">Callback angular function from jquery event</a></p>
  
  <blockquote>
    <p>package.json</p>
  </blockquote>
  
  <pre><code> "fullcalendar": "^3.8.0",
   "fullcalendar-scheduler": "^1.9.1",
   "jquery": "^3.2.1",
   "moment": "^2.20.1",
  </code></pre>
  
  <blockquote>
    <p>.angular-cli.json</p>
  </blockquote>
  
  <pre><code> "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"
    ],
  </code></pre>
  
  <blockquote>
    <p>main.ts</p>
  </blockquote>
  
  <pre><code>import * as jQuery from "jquery";
  (window as any).$ = (window as any).jQuery = jQuery;
  </code></pre>
  
  <blockquote>
    <p>app.component.html </p>
  </blockquote>
  
  <pre><code>&lt;div id='calendar'&gt;&lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>app.component.ts</p>
  </blockquote>
  
  <pre><code>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({});
    }
  }
  </code></pre>
  
  <p>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'</p>
  
  <pre><code>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'.
  </code></pre>
  
  <hr>
  
  <blockquote>
    <p>New development down this rabbit hole</p>
  </blockquote>
  
  <p>Just tried creating a new component "schedule.component" and move everything there, but now I'm getting the following errors</p>
  
  <pre><code>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.
  </code></pre>