What is the best way to enable external events for Fullcalendar in an Angular environment?

Question

What is the best way to enable external events for Fullcalendar in an Angular environment?

Struggling to integrate external events with Fullcalendar and Angular. Admittedly, I am new to Angular and there are aspects that still elude me.

Fullcalendar provides a guide on setting up with Angular, available here. Initially, I managed to set up the main calendar successfully following this guide. However, my progress hit a snag when I attempted to add external events to the calendar. There is mention of a Draggable object that needs to be used, along with some documentation on using it with Typescript. Trying to make sense of how to incorporate this into the calendar setup has been quite perplexing for me.

My search for resources on how to implement draggables for Fullcalendar in an Angular environment pointed me to a single code example found here. Despite creating an external-events component to manage this, integrating their Draggable code into a new component continues to give me trouble. This particular aspect presents a significant challenge for me.

new Draggable(this.external.nativeElement, {
  itemSelector: '.fc-event',
  eventData: function(eventEl) {
    return {
      title: eventEl.innerText
    };
  }
});

I have developed an external-events component for handling these functionalities, but whether I place it in the same component as where the calendar was created or not, I encounter the same error. Below is the snippet from external-events.component.html:

<div class="external-event-list">
  <div class="fc-event" *ngFor="let job of jobs" data-event="{{job}}" #external>{{job.customer.first_name}} {{job.customer.last_name}}</div>
</div>

Here is what external-events.component.ts looks like:

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) => {
        this.jobs = data as string [];
      },
      (err: HttpErrorResponse) => {
        console.log(err.message);
      },
    );
  }

  ngAfterViewInit(): void {
    this.external = new ElementRef('external');
    new Draggable(this.external.nativeElement, {
      itemSelector: '.fc-event',
      eventData: (eventEl) => {
        console.log(eventEl);
        return {
          title: eventEl.innerText,
        };
      },
    });
  }
}

The persistent error I keep encountering is

containerEl.addEventListener is not a function

triggered by the call to Draggable. No instance of containerEl exists in my code, leading me to believe it might be part of the base Fullcalendar code attempting to attach a listener to the calendar element but failing to locate it.

How can I rectify this issue and get the draggable feature to work effectively?

EDIT Below is the stack trace for the aforementioned error (Line 34 of external-events.component.ts is where the Draggable function is invoked):

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

angular typescript fullcalendar fullcalendar-5

Answer 1

Answer №1

Alright, I was able to solve the issue after realizing my mistakes.

Initially, I misplaced the property decorator within the HTML template. The #element should have been placed on the parent div element like so:

<div class="external-event-list" #external>
  <div class="fc-event" *ngFor="let job of jobs" data-event="{{job}}">{{job.customer.first_name}} {{job.customer.last_name}}</div>
</div>

I wrongly assumed that Draggable required access to individual draggable items, but it actually needed the parent container where it could find the draggables using the .fc-event selector.

For those facing a similar issue in the future, here is the external events component code:

import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} 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, AfterViewInit {
  @ViewChild('external') external: ElementRef;
  jobs: string [];

  constructor(private httpService: HttpClient) {}

  ngOnInit(): void {
    this.httpService.get('http://127.0.0.1:7000/api/schedule/unscheduled/?format=json').subscribe(
      (data) => {
        this.jobs = data as string [];
      },
      (err: HttpErrorResponse) => {
        console.log(err.message);
      },
    );
  }

  ngAfterViewInit(): void {
    new Draggable(this.external.nativeElement, {
      itemSelector: '.fc-event',
      eventData: (eventEl) => {
         return {
          title: eventEl.innerText,
        };
      },
    });
  }
}

Answer 2

Alright, I was able to solve the issue after realizing my mistakes.

Initially, I misplaced the property decorator within the HTML template. The #element should have been placed on the parent div element like so:

<div class="external-event-list" #external>
  <div class="fc-event" *ngFor="let job of jobs" data-event="{{job}}">{{job.customer.first_name}} {{job.customer.last_name}}</div>
</div>

I wrongly assumed that Draggable required access to individual draggable items, but it actually needed the parent container where it could find the draggables using the .fc-event selector.

For those facing a similar issue in the future, here is the external events component code:

import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} 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, AfterViewInit {
  @ViewChild('external') external: ElementRef;
  jobs: string [];

  constructor(private httpService: HttpClient) {}

  ngOnInit(): void {
    this.httpService.get('http://127.0.0.1:7000/api/schedule/unscheduled/?format=json').subscribe(
      (data) => {
        this.jobs = data as string [];
      },
      (err: HttpErrorResponse) => {
        console.log(err.message);
      },
    );
  }

  ngAfterViewInit(): void {
    new Draggable(this.external.nativeElement, {
      itemSelector: '.fc-event',
      eventData: (eventEl) => {
         return {
          title: eventEl.innerText,
        };
      },
    });
  }
}

What is the best way to enable external events for Fullcalendar in an Angular environment?

Answer №1

Similar questions

What is the best way to retrieve the data from a specific section when a checkbox is selected in Angular 2?

Having trouble with the yAxis in HighCharts on Angular 8? FireFox and IE causing issues?

Exploring Angular 2/4: Unpacking the Process of Accessing API Data Using Tokens

I am currently leveraging Angular 17, but I have yet to enable Vite. Can anyone guide me on

Can the Date class be expanded by overloading the constructor method?

Delete a Leaflet polyline connecting two markers using Angular

What is the best way to restrict a Generic type within a Typescript Function Interface?

Accessing element from view within controller in Ionic version 3.5

Encountered an 'angular client server error' when attempting to connect to the netty-socket.io server

Efficiently setting HttpParams like HttpHeaders in Angular: A streamlined approach

Issue with Angular MatSelect Losing Selected Value in Reactive Form Upon Submission

Developing with TypeScript - Utilizing the <reference path="....."> directive

"Angular application experiencing navigation blockage due to multiple concurrent HTTP requests using RxJS - Implementation of priority-based cancel queue

React and MaterialUI Chrome Extension - Data did not populate in the table

invoke a method from a different class within the same component file

Tips on deactivating a div when a checkbox is selected

Using @carbon/react in conjunction with Next.js version 13 leads to unconventional styling

Unable to test the subscribe functionality in Angular

AbstractControl is missing the 'controls' property in Angular4

There is a Typescript error stating that the argument of type 'NodeListOf<HTMLInputElement> | undefined' cannot be assigned to the parameter of type 'Iterable<HTMLInputElement> ...'