npx create-lwc-app lwcdev-fullcalender

⚡⚡⚡⚡⚡  Lightning Web Components  ⚡⚡⚡⚡⚡
? Do you want to use the simple setup? Yes
? Package name for npm lwcdev-fullcalender
? Select the type of app you want to create Standard web app
? Do you want a basic Express API server? (y/N) N

🎉  Created lwcdev-fullcalender in /Users/jburgers/VscProjects/lwcdev-fullcalender. Checkout the `scripts` section of your `package.json` to get started.

>> npm run build:development

⚡⚡⚡⚡⚡  Lightning Web Components ⚡⚡⚡⚡⚡


⌛  Creating build configuration
📦  Starting build process.
       Build duration: 2.415
🎉  Build successfully created.
Waiting for the debugger to disconnect...
Waiting for the debugger to disconnect...

>> npm run watch

⚡⚡⚡⚡⚡  Lightning Web Components ⚡⚡⚡⚡⚡


📦  Starting build process.
🌎  Local server listening: http://localhost:3001

(app works)


Installing full-calendar
https://fullcalendar.io/docs/initialize-es6

>> npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list

Debugger listening on ws://127.0.0.1:60784/c9940095-ac0c-4520-8dbc-d10229b529db
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
npm WARN @lwc/[email protected] requires a peer of jest@^26 but none is installed. You must install peer dependencies yourself.
npm WARN @lwc/[email protected] requires a peer of jest@^26 but none is installed. You must install peer dependencies yourself.
npm WARN @lwc/[email protected] requires a peer of jest@^26 but none is installed. You must install peer dependencies yourself.
npm WARN @lwc/[email protected] requires a peer of jest@^26 but none is installed. You must install peer dependencies yourself.
npm WARN @salesforce/[email protected] requires a peer of @salesforce/eslint-plugin-lightning@^0.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN @salesforce/[email protected] requires a peer of eslint-plugin-import@* but none is installed. You must install peer dependencies yourself.
npm WARN @salesforce/[email protected] requires a peer of eslint-plugin-jest@* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.

+ @fullcalendar/[email protected]
+ @fullcalendar/[email protected]
+ @fullcalendar/[email protected]
+ @fullcalendar/[email protected]
added 6 packages from 1 contributor and audited 1530 packages in 7.551s

##Adding Webpack supports for fullcalendar package https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/webpack

##Needed additional packages (DevDependencies) https://github.com/fullcalendar/fullcalendar-example-projects/blob/master/webpack/package.json

"devDependencies": {
   "css-loader": "^4.3.0",
   "mini-css-extract-plugin": "^1.2.0",

>> npm install --save-dev css-loader

➜  lwcdev-fullcalendar git:(master) ✗ npm install --save-dev css-loader

Debugger listening on ws://127.0.0.1:63683/65ef5eaa-06bc-478a-a773-8e78d6930d83
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
npm WARN @lwc/[email protected] requires a peer of jest@^26 but none is installed. You must install peer dependencies yourself.
npm WARN @lwc/[email protected] requires a peer of jest@^26 but none is installed. You must install peer dependencies yourself.
npm WARN @lwc/[email protected] requires a peer of jest@^26 but none is installed. You must install peer dependencies yourself.
npm WARN @lwc/[email protected] requires a peer of jest@^26 but none is installed. You must install peer dependencies yourself.
npm WARN @salesforce/[email protected] requires a peer of @salesforce/eslint-plugin-lightning@^0.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN @salesforce/[email protected] requires a peer of eslint-plugin-import@* but none is installed. You must install peer dependencies yourself.
npm WARN @salesforce/[email protected] requires a peer of eslint-plugin-jest@* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.

+ [email protected]
added 8 packages from 4 contributors and audited 1538 packages in 6.708s

>> npm install --save-dev mini-css-extract-plugin

➜  lwcdev-fullcalendar git:(master) ✗ npm install --save-dev mini-css-extract-plugin

Debugger listening on ws://127.0.0.1:64527/71eb715a-576d-4453-8c1e-9775345210b7
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
npm WARN @lwc/[email protected] requires a peer of jest@^26 but none is installed. You must install peer dependencies yourself.
npm WARN @lwc/[email protected] requires a peer of jest@^26 but none is installed. You must install peer dependencies yourself.
npm WARN @lwc/[email protected] requires a peer of jest@^26 but none is installed. You must install peer dependencies yourself.
npm WARN @lwc/[email protected] requires a peer of jest@^26 but none is installed. You must install peer dependencies yourself.
npm WARN @salesforce/[email protected] requires a peer of @salesforce/eslint-plugin-lightning@^0.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN @salesforce/[email protected] requires a peer of eslint-plugin-import@* but none is installed. You must install peer dependencies yourself.
npm WARN @salesforce/[email protected] requires a peer of eslint-plugin-jest@* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.

+ [email protected]
added 5 packages from 38 contributors and audited 1543 packages in 6.185s

##Checking package.json DevDependencies:

"devDependencies": {
    "css-loader": "^5.2.6",
    "eslint": "^7.28.0",
    "eslint-plugin-inclusive-language": "^2.1.1",
    "husky": "^6.0.0",
    "lwc-services": "^3.1.1",
    "mini-css-extract-plugin": "^1.6.0",
    "prettier": "^2.3.1"
}

###The sample webpack.config.js: https://github.com/fullcalendar/fullcalendar-example-projects/blob/master/webpack/webpack.config.js

From that, I extracted following bits.

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          { loader: 'css-loader', options: { importLoaders: 1 } }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'main.css'
    })
  ]
}

Add above to the lwc-services.config.js, it becomes:

// Find the full example of all available configuration options at
// https://github.com/muenzpraeger/create-lwc-app/blob/main/packages/lwc-services/example/lwc-services.config.js

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    resources: [{ from: 'src/resources/', to: 'dist/resources/' }],
    module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              { loader: MiniCssExtractPlugin.loader },
              { loader: 'css-loader', options: { importLoaders: 1 } }
            ]
          }
        ]
      },
      plugins: [
        new MiniCssExtractPlugin({
          filename: 'main.css'
        })
      ]
};

##>> Adding the boiler plate code to my/app/app.js (https://github.com/fullcalendar/fullcalendar-example-projects/blob/master/webpack/src/main.js) ##>> Adding the

to my/app/app.html ##>> Adding the boiler plate css to my/app/main.css (https://github.com/fullcalendar/fullcalendar-example-projects/blob/master/webpack/src/main.css)

>> npm run build:development

Error. It's missing @fullcalendar/interaction

>> npm install @fullcalendar/interaction

Debugger listening on ws://127.0.0.1:58619/02e424a1-8c84-4176-8f13-2ea9510acb47
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
npm WARN @lwc/[email protected] requires a peer of jest@^26 but none is installed. You must install peer dependencies yourself.
npm WARN @lwc/[email protected] requires a peer of jest@^26 but none is installed. You must install peer dependencies yourself.
npm WARN @lwc/[email protected] requires a peer of jest@^26 but none is installed. You must install peer dependencies yourself.
npm WARN @lwc/[email protected] requires a peer of jest@^26 but none is installed. You must install peer dependencies yourself.
npm WARN @salesforce/[email protected] requires a peer of @salesforce/eslint-plugin-lightning@^0.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN @salesforce/[email protected] requires a peer of eslint-plugin-import@* but none is installed. You must install peer dependencies yourself.
npm WARN @salesforce/[email protected] requires a peer of eslint-plugin-jest@* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.

+ @fullcalendar/[email protected]
updated 1 package and audited 1544 packages in 6.515s

>> run build:development

⚡⚡⚡⚡⚡  Lightning Web Components ⚡⚡⚡⚡⚡
⌛  Creating build configuration
📦  Starting build process.
🆘  Module parse failed: Unexpected token (4: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
| /* classes attached to <body> */
| 
> .fc-not-allowed,
| .fc-not-allowed .fc-event { /* override events' custom cursors */
|   cursor: not-allowed;