When using Angular9 with PrimeNG fullcalendar, it may encounter issues such as errors stating "Cannot find namespace 'FullCalendarVDom'." and "Please import the top-level fullcalendar lib"

Using primeng p-fullcalendar in my angular application.

Encountering an error in the command-line: 'Cannot find namespace 'FullCalendarVDom'

Also seeing this error in the browser: 'Please import the top-level fullcalendar lib before attempting to import a plugin.'

This is the code I have:

import { FullCalendar } from 'primeng/fullcalendar';
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
@ViewChild('calendar', { static: true }) private calendar: FullCalendar;

In the constructor:

 this.events = [{
   "title": "Conference",
   "start": "2016-01-11",
   "end": "2016-01-13"
 }];
 this.options = {
   plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
   defaultDate: '2017-02-01',
   header: {
     left: 'prev,next',
     center: 'title',
     right: 'month,agendaWeek,agendaDay'
   }

I have followed suggestions from previous answers by adding these imports, but it hasn't resolved the issue.

What am I overlooking?

Answer №1

To make Primeng work with FullCalendar 4.1, consider installing version v4.1 instead of the latest one.

npm i @fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2645495443661208170816">[email protected]</a>
npm i @fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e38a8d9786918280978a8c8da3d7cdd2cdd3">[email protected]</a>
npm i @fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afcbced6c8ddc6cbef9b819e819f">[email protected]</a>
npm i @fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44302d292123362d2004706a756a74">[email protected]</a>

Answer №2

Encountered a similar issue with my configuration of primeNG v12 and Angular v12. After some investigation, I was able to successfully compile it using FullCalendar version 5.8.

To summarize, I adjusted the FullCalendar declaration in the HTML template to function with the @fullcalendar/angular package, as mentioned in this problem report #10451: https://github.com/primefaces/primeng/commit/96fc1ced182a78eef87781018a65d1e1cfb51307

Here are the steps I took:

  • Installed the @fullcalendar/angular package.
  • Made this change
<p-fullCalendar [options]="options"></p-fullCalendar>

Changed it to this

<full-calendar [options]="options"></full-calendar>
  • Lastly, I modified the app.module.ts file accordingly to enable the newly added HTML tag to function.
import {FullCalendarModule} from '@fullcalendar/angular';
@NgModule({
...
imports: [FullCalendarModule]
...
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 8: Syncing Component Values with Service Updates

My Angular 8 project features two sibling components that utilize a service to manage restaurant data. One component displays a list of restaurants fetched from an api, while the other component filters the displayed restaurants based on user input. Despit ...

Generate a fresh JSON object following a click event triggered by an HTTP PUT request

I have the following structure in JSON format: "disputes": [ { id: "", negotiation_type: "", history:{ user_flag: "", created_at: "", updated_at: "", created_by: null, updated_by: null, ...

What causes a compilation error to occur when a mapped type is invoked inside a class?

Below is a code snippet for review. An error occurs when calling the get method within the class, but works fine when called outside. Any thoughts on why? type DefinedKeys<T> = keyof { [K in keyof T as undefined extends T[K] ? never : K]: K } cla ...

Mastering the art of connecting content within Prismic

I have been working on creating a mega menu for my website header, but I am encountering a type error. Has anyone else faced this issue before and how did you resolve it? I am currently importing the generated types from @/prismicio-types. Here is an exam ...

The Child Component encountered difficulties in connecting to the EventEmitter via the service

In the code snippet below, we have the Subscribing Component "pop-list.component.ts" : import { Component, OnInit } from '@angular/core'; import { ChildCommService } from '../child-comm.service'; @Component({ selector: 'app-pop- ...

The process of Angular Ahead-of-Time (AoT)

After reviewing the latest updates in Angular documentation, it seems that they have made significant changes to their approach. Previously, the process was as follows: Execute the ng eject command to generate webpack.config.js. Create webpack.config.aot ...

Utilizing local storage to retain column resize settings in PrimeNG

I am currently working on implementing the order, toggle, and resize (Fit Mode) features on a primeng table. So far, I have managed to update the selectedColumns array for order and toggle, allowing me to save the current user settings. My issue lies with ...

Utilizing TypeScript namespaced classes as external modules in Node.js: A step-by-step guide

My current dilemma involves using namespaced TypeScript classes as external modules in Node.js. Many suggest that it simply can't be done and advise against using namespaces altogether. However, our extensive codebase is structured using namespaces, ...

WebStorm lacks support for TypeScript's `enum` and `readonly` features

When working with TypeScript in WebStorm, I encountered an issue where the IDE does not recognize enum or readonly. To solve this problem, I delved into TypeScript configuration files. I am currently utilizing .eslintignore, .eslintrc, tsconfig.json, and ...

"Implementing an abstract method in a class by overloading it with a generic type that

// Greetings from the TypeScript Playground, a platform where you can experiment with TypeScript code. type Constructor<T> = new (...args: any[]) => T; class ServiceChecklistResponse { } class AnotherModel { } abstract class AbstractView { ...

How to automatically redirect in Angular 2 by utilizing router.navigate

router.navigate() seems to be working correctly in one scenario, but in another case it is redirecting to the home page unexpectedly. app.module.ts const appRoutes: Routes = [ { path: 'news/:urlLink', component: ArticlereaderComponent }, ...

Tips for using the "distinct" RxJS operator effectively in Angular 2

Is there a method to clear the cache of distinct()? Sometimes, when I reset this.messages=[], I would like to clear the cache. Instead of finding a proper solution, I have resorted to a workaround where I increase distinctCount. ngOnInit() { let cach ...

Upon updating from Angular5 to Angular7, the slice pipe seems to be stuck in an endless loop

Recently, I upgraded my project from angular 5 to angular 7. However, after completing the upgrade, I noticed that the slice pipe was not functioning correctly. It seemed to be causing infinite loops in the angular core files and even resulted in my browse ...

Angular automatically protects routes by default

In the application I've created, there is a requirement for most routes to be protected and accessible only when logged in. Is it feasible to implement a default route guard while also specifying certain routes that should remain open? ...

ESLint is unable to locate the OnInit function within the "@angular/core" module

There seems to be an error: import { Component, OnInit, Input, ViewChild, ElementRef } from "@angular/core"; OnInit not found in '@angular/core'eslintimport/named The code appears to be functioning correctly, so perhaps there is a m ...

Angular - Error: Cannot read property 'publishLast' of undefined

My goal is to prevent multiple requests from being created when using the async pipe. I am facing an issue with a request to fetch a user from the API: getUser() { this._user = this.http.get<User>(environment.baseAPIUrl + 'user') ...

Mapping JSON objects to TypeScript Class Objects

I am in the process of transitioning my AngularJS application to Angular 6, and I'm encountering difficulties converting a JSON object into a TypeScript object list. In my Angular 6 application, I utilize this.http.get(Url) to retrieve data from an AP ...

Troubleshooting Image Upload Problem with Angular, Node.js, Express, and Multer

While trying to implement the functionality of uploading an image, I have been referencing various guides like how to upload image file and display using express nodejs and NodeJS Multer is not working. However, I am facing issues with getting the image to ...

Can we verify if strings can serve as valid property names for interfaces?

Let's consider an interface presented below: interface User { id: string; name: string; age: number; } We also have a method defined as follows: function getUserValues(properties:string[]):void { Ajax.fetch("user", properties).then( ...

Angular Forms, mark a form as invalid if a p-select element retains its original value

I am looking to prevent the submit button from being enabled until a user makes changes in any of the form controls. The challenge I'm facing is that while required input fields are easy to handle, there is also a select control with three options. De ...