Setup Fullcalendar in a Jhipster Angular project

Question

I'm trying to add Fullcalendar to a Jhipster(6.10.3) and angular 10 project

In an Angular Cli everything works as expected

An idea how to make it work with ?

Package.json :

"@fullcalendar/angular": "^5.3.1",
"@fullcalendar/core": "^5.3.1",
"@fullcalendar/daygrid": "^5.3.2",
"@fullcalendar/interaction": "^5.3.1",
"@fullcalendar/list": "^5.3.1",
"@fullcalendar/timegrid": "^5.3.1",

Stack trace :

ERROR in ./node_modules/@fullcalendar/common/main.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .fc-not-allowed,
| .fc-not-allowed .fc-event { /* override events' custom cursors */
|   cursor: not-allowed;

ERROR in ./node_modules/@fullcalendar/daygrid/main.css 2:0
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
> :root {
|   --fc-daygrid-event-dot-width: 8px;
| }

ERROR in ./node_modules/@fullcalendar/list/main.css 2:0
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
> :root {
|   --fc-list-event-dot-width: 10px;
|   --fc-list-event-hover-bg-color: #f5f5f5;

ERROR in ./node_modules/@fullcalendar/timegrid/main.css 6:0
Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
|
> .fc-v-event { /* allowed to be top-level */
|   display: block;
|   border: 1px solid #3788d8;
i ｢wdm｣: Failed to compile.

Thank you

I found my solution to this link : https://stackoverflow.com/questions/72919179/module-parse-failed-unexpected-token-40 — Ibrahim Kelly, Dec 09 '22 at 15:04

elk-tamer · Accepted Answer · 2020-09-28T14:10:22.817

I think it's going now:

I added a loader in webpack.dev.js

 {
                test: /\.css$/i,
                use: [
                  'handlebars-loader', // handlebars loader expects raw resource string
                  'extract-loader',
                  'css-loader',
                ],
              },

Then had to install:

npm i handlebars-loader --save
npm i extract-loader --save
npm install --save handlebars

I also had to add this to content/scss/vendor.scss:

@import '~@fullcalendar/common/main.css';
@import '~@fullcalendar/daygrid/main.css';

Setup Fullcalendar in a Jhipster Angular project

1 Answers1