title: How do get the external events for Fullcalendar to work in Angular?
body: <p>I have been trying to get external events working with Fullcalendar and Angular.  I confess that I am new to Angular, and there are some things I obviously don't understand.</p>
  <p>Fullcalendar has a page on setting it up with Angular, which is <a href="https://fullcalendar.io/docs/angular" rel="nofollow noreferrer">here</a>.  I got the main calendar setup in this way, and things were all working excellent until I got to the point that I wanted to drop external events onto the calendar.  Apparently there is a <code>Draggable</code> object that needs to be employed, and there is some <a href="https://fullcalendar.io/docs/external-dragging" rel="nofollow noreferrer">documentation about how to use it using Typescript</a>, but trying to translate that into working with how they say to set up the calendar has been frustrating me.</p>
  <p>Searching for anything showing how to setup draggables for fullcalendar in Angular has only brought up a single code example, which is <a href="https://stackblitz.com/edit/fullcalendar-angular-demo?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">here</a>.  I am having trouble getting their code for the Draggable item working though, given my desire to add it in a new component.  This is the bit that seems to be troublesome for me.</p>
  <pre><code>new Draggable(this.external.nativeElement, {
    itemSelector: '.fc-event',
    eventData: function(eventEl) {
      return {
        title: eventEl.innerText
      };
    }
  });
  </code></pre>
  <p>I have created an external-events component to handle these, but I have tried it in the component I create the calendar in and get exactly the same error. Here is the <code>external-events.component.html</code>:</p>
  <pre><code>&lt;div class=&quot;external-event-list&quot;&gt;
    &lt;div class=&quot;fc-event&quot; *ngFor=&quot;let job of jobs&quot; data-event=&quot;{{job}}&quot; #external&gt;{{job.customer.first_name}} {{job.customer.last_name}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here is the <code>external-events.component.ts</code>:</p>
  <pre><code>import {AfterContentInit, Component, ElementRef, OnInit, ViewChildren} from '@angular/core';
  import {HttpClient, HttpErrorResponse} from '@angular/common/http';
  import {Draggable} from '@fullcalendar/interaction';
  
  
  @Component({
    selector: 'app-external-events',
    templateUrl: './external-events.component.html',
    styleUrls: ['./external-events.component.css'],
  })
  
  export class ExternalEventsComponent implements OnInit, AfterContentInit {
    @ViewChildren('external', {static: true}) external: any;
    jobs: string [];
  
    constructor(private httpService: HttpClient) {
    }
  
    ngOnInit(): void {
      this.httpService.get('http://127.0.0.1:7000/api/schedule/unscheduled/?format=json').subscribe(
        (data) =&gt; {
          this.jobs = data as string [];
        },
        (err: HttpErrorResponse) =&gt; {
          console.log(err.message);
        },
      );
    }
  
    ngAfterViewInit(): void {
      this.external = new ElementRef('external');
      new Draggable(this.external.nativeElement, {
        itemSelector: '.fc-event',
        eventData: (eventEl) =&gt; {
          console.log(eventEl);
          return {
            title: eventEl.innerText,
          };
        },
      });
    }
  }
  </code></pre>
  <p>I keep getting the error <code>containerEl.addEventListener is not a function</code> where the Draggable is called.  I have no idea where <code>containerEl</code> resides, as it isn't in my code anywhere.  I am assuming it is part of the fullcalendar code.  My guess is that it is trying to attach a listener to the calendar, but can't find it.</p>
  <p>What do I need to do to get the draggable working?</p>
  <p><strong>EDIT</strong>
  Here is the stack trace for the error  (Line 34 of external-events.component.ts is where I call Draggable):</p>
  <pre><code>ERROR TypeError: containerEl.addEventListener is not a function
      at new PointerDragging (main.js:125)
      at new FeaturefulElementDragging (main.js:780)
      at new ExternalDraggable (main.js:2031)
      at ExternalEventsComponent.ngAfterViewInit (external-events.component.ts:34)
      at callHook (core.js:2481)
      at callHooks (core.js:2451)
      at executeInitAndCheckHooks (core.js:2403)
      at refreshView (core.js:9242)
      at refreshComponent (core.js:10324)
      at refreshChildComponents (core.js:8968)
  defaultErrorLogger  @   core.js:6006
  handleError @   core.js:6054
  (anonymous) @   core.js:29191
  invoke  @   zone-evergreen.js:364
  run @   zone-evergreen.js:123
  runOutsideAngular   @   core.js:28195
  tick    @   core.js:29191
  (anonymous) @   core.js:29070
  invoke  @   zone-evergreen.js:364
  onInvoke    @   core.js:28267
  invoke  @   zone-evergreen.js:363
  run @   zone-evergreen.js:123
  run @   core.js:28150
  next    @   core.js:29069
  schedulerFn @   core.js:25632
  __tryOrUnsub    @   Subscriber.js:183
  next    @   Subscriber.js:122
  _next   @   Subscriber.js:72
  next    @   Subscriber.js:49
  next    @   Subject.js:39
  emit    @   core.js:25622
  checkStable @   core.js:28203
  onHasTask   @   core.js:28281
  hasTask @   zone-evergreen.js:419
  _updateTaskCount    @   zone-evergreen.js:440
  _updateTaskCount    @   zone-evergreen.js:263
  runTask @   zone-evergreen.js:184
  drainMicroTaskQueue @   zone-evergreen.js:569
  Promise.then (async)        
  scheduleMicroTask   @   zone-evergreen.js:552
  scheduleTask    @   zone-evergreen.js:388
  scheduleTask    @   zone-evergreen.js:210
  scheduleMicroTask   @   zone-evergreen.js:230
  scheduleResolveOrReject @   zone-evergreen.js:847
  then    @   zone-evergreen.js:979
  bootstrapModule @   core.js:28855
  zUnb    @   main.ts:11
  __webpack_require__ @   bootstrap:79
  0   @   scheduler.component.ts:18
  __webpack_require__ @   bootstrap:79
  checkDeferredModules    @   bootstrap:45
  webpackJsonpCallback    @   bootstrap:32
  (anonymous) @   main.js:1
  </code></pre>