fullcalendar-angular: Error with CSS imports in Angular 14

another workaround is to add following to angular.json’s styles array

"styles" : [
...
"./node_modules/@fullcalendar/common/main.css",
"./node_modules/@fullcalendar/daygrid/main.css",
"./node_modules/@fullcalendar/timegrid/main.css",
"./node_modules/@fullcalendar/list/main.css",
...
],

Hi @thaoula, I’m working hard to finish v6. Another beta should be out early next week. I’ve decided to have a legit @fullcalendar/angular package for v6 rather than the web-component. I was influenced by this article which notes that component validation is essentially turned off when you use CUSTOM_ELEMENTS_SCHEMA. There will also be additional features.

Please stay tuned. I understand that people are eager to receive a proper fix.

Alright, the next beta has been released:

• blog: https://fullcalendar.io/blog/2022/11/v6-beta-released
• angular changelog: https://fullcalendar.io/docs/v6/upgrading-from-v5#angular-specific-changes

Hi @arshaw,

Angular 15 is released and this issue has come back to bite us 😦

The workaround you posted recently is quite invasive and also cannot be used until the custom webpack builder is updated to support Angular 15.

Furthermore, as @uvesten mentioned, adding the styles to the angular.json file no longer works in Angular 15.

Just a question, Is there any further progress on FullCalendar 6? I really hope you and the team go with a upgraded Angular connector rather than using Web Components as we don’t really fancy having to use CUSTOM_ELEMENTS_SCHEMA.

Many thanks in advance.

Regards. Tarek

I’m sorry for the silence here. Life got in the way, and also, the proper solution to this problem is difficult. FullCalendar v5 imports .css files as you all know, and the only way to solve it is to make FullCalendar NOT DO THAT anymore. This requires a breaking change (v6).

I’ve created a v6 beta release that no longer internally imports .css files. Instead, the JS injects the CSS.

HOWEVER, I’ve dropped the @fullcalendar/angular package from the release and instead I’m encouraging people to use the @fullcalendar/web-component package. I’ve made an example project that breaks down this technique. It’s very easy to set up. Once it’s set up, the API is exactly the same as before.

I will create a roadmap that outlines the high-level plan. Essentially, we plan to have Angular users use the Web Component for v6. This lessens our maintenance burden in the meantime. Then for v7, we plan to revive the Angular connector to do advanced features like custom template slots, which are impossible to do with a mere web component.

Please post feedback about the web component.

I was using @sha-N 's workaround successfully, but it no longer works with Angular 15 RC, just FYI.

Unfortunately this issue blocks us from migrating to Angular 14. Our current workaround/hack is to remove the css imports from the library and import them manually via scss import.

Not proud of the solution, but it might help others:

• Create a file called “remove-css-imports.js” in your root
• Add the following content:

const fs = require("fs");

const files = [
  "node_modules/@fullcalendar/common/main.js",
  "node_modules/@fullcalendar/daygrid/main.js",
  "node_modules/@fullcalendar/timegrid/main.js"
];

for (const fullCalendarFile of files) {
  fs.readFile(fullCalendarFile, "utf8", function (err, data) {
    if (err) {
      return console.log(err);
    }
    var result = data.replace("import './main.css';", "");

    fs.writeFile(fullCalendarFile, result, "utf8", function (err) {
      if (err) return console.log(err);
    });
  });
}

• call this as postinstall script in your package.json : "postinstall": "node remove-css-imports.js"
• import the css files manually in any angular’s scss style file :

// temporarily import fullcalendar css
@import "@fullcalendar/common/main.css";
@import "@fullcalendar/daygrid/main.css";
@import "@fullcalendar/timegrid/main.css";

Remember to remove the .angular folder if you previously built the project since fullcalendar will be cached in there.

Release in v6.0.0

I can confirm I am also experience this issue which is holding up our move to Angular 14. Is there any work being done to officially resolve this issue?

I’ve released @fullcalendar/angular v5.11.3 which supports Angular 14. I’ve devised a dependable workaround for the CSS issue, described here: https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/angular14#workarounds

I’ve updated the docs to reflect.

We still have plans to make this absolutely seamless in the next major version of FullCalendar (whether we use a Web Component or upgrade the angular connector)

I’m sorry for the silence here. Life got in the way, and also, the proper solution to this problem is difficult. FullCalendar v5 imports .css files as you all know, and the only way to solve it is to make FullCalendar NOT DO THAT anymore. This requires a breaking change (v6).

I’ve created a v6 beta release that no longer internally imports .css files. Instead, the JS injects the CSS.

HOWEVER, I’ve dropped the @fullcalendar/angular package from the release and instead I’m encouraging people to use the @fullcalendar/web-component package. I’ve made an example project that breaks down this technique. It’s very easy to set up. Once it’s set up, the API is exactly the same as before.

I will create a roadmap that outlines the high-level plan. Essentially, we plan to have Angular users use the Web Component for v6. This lessens our maintenance burden in the meantime. Then for v7, we plan to revive the Angular connector to do advanced features like custom template slots, which are impossible to do with a mere web component.

Please post feedback about the web component.

Hey and thanks for the example. But what about the other plugins (rrrule, interaction, list etc.)? Overall payed resource timeline. Ive got no chance to get it work and this library blocks the A14 update 😦

another workaround is to add following to angular.json’s styles array

"styles" : [
...
"./node_modules/@fullcalendar/common/main.css",
"./node_modules/@fullcalendar/daygrid/main.css",
"./node_modules/@fullcalendar/timegrid/main.css",
"./node_modules/@fullcalendar/list/main.css",
...
],

its working! Thanks.

Confirmed angular 15 doesn’t allow us importing css from styles array in angular.json.

./node_modules/@fullcalendar/daygrid/main.css?ngGlobalStyle:2:0 - Error: 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;
| }

@jcompagner Because it only angular-cli related problem caused by removal of support import css modules in js code

why is this problem moved to the fullcalender-angular project when the real problem is really in for example the common module:

https://github.com/fullcalendar/fullcalendar/blob/master/packages/common/src/main.ts#L1

there the main.ts file imports a css file which is not really a fully supporting thing

So how should the fullcalendar-angular subproject fix this?

As I used @angular-builders/custom-webpack I ignore it with

 new IgnorePlugin({
             resourceRegExp: /[\\/]\w+\.css$/,
             contextRegExp: /[\\/]@fullcalendar[\\/]\w+$/,
        }),

The import css statements will have to be removed. They are no longer supported by the Angular CLI and they do plan on supporting this going forward.

https://github.com/angular/angular-cli/issues/23273