angular9 with primeng fullcalendar throws errors: Cannot find namespace 'FullCalendarVDom'. and 'Please import the top-level fullcalendar lib'

Question

I use primeng p-fullcalendar in my angular app.

I get this error in command-line: 'Cannot find namespace 'FullCalendarVDom'

and in browser: 'Please import the top-level fullcalendar lib before attempting to import a plugin.'

my code:

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 c'tor:

 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 added these imports according to preview answers, but it did not help.

What I missed?

user_3165170 · Answer

Primeng working with FullCalendar 4.1, instead of instaling latest version of FullCalendar try to install v4.1.

npm i @fullcalendar/core@4.1.0
npm i @fullcalendar/interaction@4.1.0
npm i @fullcalendar/daygrid@4.1.0
npm i @fullcalendar/timegrid@4.1.0

user_1995627 · Answer

Experienced the same problem with my primeNG v12 + Angular v12 setup. Did a little research and finally able to build it with FullCalendar version 5.8 successfully.

In a nutshell; i've changed the declaration of FullCalendar in html template to work with @fullcalendar/angular package as stated in this issue #10451: https://github.com/primefaces/primeng/commit/96fc1ced182a78eef87781018a65d1e1cfb51307

Here's the steps:

Installed the @fullcalendar/angular package.
Changed this

To this

Finally made the appropriate changes in app.module.ts file to make newly added html tag to work.

import {FullCalendarModule} from '@fullcalendar/angular';
@NgModule({
...
imports: [FullCalendarModule]
...
})

angular9 with primeng fullcalendar throws errors: Cannot find namespace 'FullCalendarVDom'. and 'Please import the top-level fullcalendar lib'

2 Answers