title: PrimeNG - FullCalendar: cannot access fullCalendar methods
body: <p>I have an Angular 7 app in which I use <code>PrimeNG</code> and FullCalendar 4 to display and manage a day schedule.
  To delete an Event I added a custom delete Icon to the rendered events and bound its onClick event to my onEventDeleteClicked function.</p>
  
  <p>As per <code>PrimeNG</code> documentation, I added a <code>ViewChild</code> for the Calendar to access its methods (code below).<br>
  <a href="https://www.primefaces.org/primeng/#/fullcalendar" rel="nofollow noreferrer">https://www.primefaces.org/primeng/#/fullcalendar</a></p>
  
  <p><em>component.ts ViewChild and onEventDeleteClicked</em></p>
  
  <pre class="lang-js prettyprint-override"><code>@ViewChild('daySchedule') fc: FullCalendar;
  
  public onEventDeleteClicked(event: Event): void {
      // Delete selected Event
      const calendar = this.fc.getCalendar();
      console.log(event);
  }
  </code></pre>
  
  <p><em>component.html</em></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="calendar-container"&gt;
      &lt;p-fullCalendar #daySchedule [events]="events" [options]="options"&gt;&lt;/p-fullCalendar&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However when I try to call <code>"const calendar = this.fc.getCalendar();"</code> in the method I get the <code>Error: "Cannot get getCalendar of undefined"</code></p>
  
  <p>I have checked within fullCalendars own callbacks like eventRender and the Angular lifecycle hook <code>AfterViewInit</code>. In both of them, FC is defined and I am able to access <code>getCalendar()</code> but it seems outside of this FC is undefined when accessed from any of my own functions.</p>