FullCalendar not working : Cannot find namespace 'FullCalendarVDom'

[romainlk]

I follow all instructions on https://www.primefaces.org/primeng/show ... llcalendar, even add several packages more:
"@fullcalendar/angular": "^5.5.0",
"@fullcalendar/core": "^5.5.0",
"@fullcalendar/daygrid": "^5.5.0",
"@fullcalendar/interaction": "^5.5.0",
"@fullcalendar/list": "^5.5.0",
"@fullcalendar/timegrid": "^5.5.0"

but the problem still happen :
node_modules/@fullcalendar/common/vdom.d.ts:17:40 - error TS2503: Cannot find namespace 'FullCalendarVDom'.

I also change the css path to "node_modules/@fullcalendar/common/main.min.css"

The FullCalendar library seems to work according to this https://codesandbox.io/s/github/fullcal ... mponent.ts

Does someone know how to resolve this please ?

[Dylan Baird]

I just wanted to add that I have been having very similar problems. It's unfortunate as I have not had this level of difficulty with any other component from Prime NG. Just this, the FullCalendar, has been a fairly trying experience.

The problem regarding the CSS is a strange one. The documentation says to either import or declare in angular.json files that do not exist. There are no .css files in @fullcalendar/core, there are however similarly named files in @fullcalendar/common. So this compiles but does not look quite the same. Small details, but it shows. The title is not centered, the back/forward buttons are not on the left, so on and so forth.

I found this SO comment that suggests importing Calendar from @fullcalendar/core in the component.ts file. This compiles, but I'm well confused as it is unused but seemingly necessary.

To add to the above poster, without that import, I as well get the error that it cannot find FullCalendarVDom. In fact, the entire file common/vdom.d.ts seems to have issues. VS code highlights all of the lines saying it can't find anything. I just noticed that there is a file with the same name in the directory core.

Is this an issue? Between common and core? No idea, just spitballing here.

I too would appreciate some assistance. The component looks great and I will be very happy to be able to use it properly.

(https://stackoverflow.com/questions/638 ... in-angular)

[Dylan Baird]

Quick update: regarding my styling problems, it turns out to not be a question of the css files, but rather the syntax of options set in the component.ts file. In the documentation, it says that you can set options.header, but in fact, it is options.headerToolbar. After the changes made above, I have the calendar working very well now. I'm very happy with it, and it seems like these issues can really just be solved by updating the documentation.

Thanks PrimeNg!

[kamil]

Hi,
here https://www.primefaces.org/primeng-blueprint/ is nicely written: "Various other 3rd party Angular templates are actually ports from other technologies and they bring the burden of a dependency hell"

Basically once you create new angular project by

Code: Select all

ng new myProject

all main needed 3rd latest libraries/packages are used (visible in the file package.ts). But other packages (e.g. PrimeNG) depend on concrete 3rd party versions. E.g. PrimeNG (11.2) FullCalendar requires FullCanlendar v4 (btw. this dependency is mentioned in PrimeNG Showcase and doc).

So you need install concrete versions - see command b) below:

Code: Select all

// a) install latest version (so e.g. 5 instead of 4)
npm install @fullcalendar/core

// b) install concrete version
npm install @fullcalendar/core@4.1.0

// c) by using '^' you can install latest version of 4 (so actually e.g. 4.4.2)
npm install @fullcalendar/core@^4.1.0

Code: Select all

        "@fullcalendar/core": "4.1.0",
        "@fullcalendar/daygrid": "4.1.0",
        "@fullcalendar/interaction": "4.1.0",
        "@fullcalendar/timegrid": "4.1.0",

During installation of PrimeNG 11.2 I also got "version" error with zone.js, so I had to downgrade zone.js from 0.11.3 to 0.10.2.

It looks that the best way how to avoid this dependency hell is to clone/download some PrimeNG project and use it to as reference, specially if you are new in PrimeNG (& Angular):
a) PrimeNG & showcase: https://github.com/primefaces/primeng
b) PrimeNG issue template: or their test project (used to simulate & report bugs): https://github.com/primefaces/primeng-issue-template
c) PrimeNG quickstart: https://github.com/primefaces/primeng-quickstart-cli
d) PrimeNG blue print: https://github.com/primefaces/primeng-blueprint
e) or PrimeNG paid template (some of them are cheap if you use personal licence) (here is visible which template is already update to v11: https://github.com/primefaces/primeng/w ... pdates-v11)

Unfortunately just some of these projects are updated to Angular 11.