I'm currently experimenting with the FullCalendar plugin from fullcalendar.io. They recommended using Webpack as a build system, which is new to me. I managed to set up the calendar functionality after some research, but I'm facing issues with the stylesheets. According to my findings, I need to include "css-loader" and "style-loader" in my webpack.config.js file. Despite trying various solutions, I still can't get it to work. Any assistance would be greatly appreciated!
Project Structure
->dist
--->bundle.js
->src
--->main
----->webapp
------->JS
--------->calendar.js
----->Calendar.html
->package.json
->webpack.config.js
Calendar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calendar</title>
<style>
.calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
<script type="module" src="./dist/bundle.js"></script>
</head>
<body>
<div id="calendar" class="calendar"></div>
</body>
</html>
calendar.js
import { Calendar } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';
import '@fullcalendar/timegrid/main.css';
import '@fullcalendar/list/main.css';
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
}
});
calendar.render();
});
package.json
{
"name": "cimplanner",
"version": "1.0.0",
"dependencies": {},
"main": "index.js",
"devDependencies": {
"@fullcalendar/core": "^4.4.0",
"@fullcalendar/daygrid": "^4.4.0",
"@fullcalendar/interaction": "^4.4.0",
"@fullcalendar/list": "^4.4.0",
"@fullcalendar/timegrid": "^4.4.0",
"css-loader": "^3.5.3",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"description": ""
}
webpack.config.js
const path = require('path');
module.exports = {
entry: "./src/main/webapp/sources/JS/calendar.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: "/\.css$/",
use: [
{
loader: "css-loader"
},
{
loader: "style-loader"
}
]
}
]
},
mode: "development"
};
Error
ERROR in ./node_modules/@fullcalendar/core/main.css 1:0
Module parse failed: Unexpected character '@' (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
> @charset "UTF-8";
| .fc {
| direction: ltr;
@ ./src/main/webapp/sources/JS/calendar.js 6:0-37
ERROR in ./node_modules/@fullcalendar/timegrid/main.css 1:0
Module parse failed: Unexpected character '@' (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
> @charset "UTF-8";
| /* TimeGridView all-day area
| --------------------------------------------------------------------------------------------------*/
@ ./src/main/webapp/sources/JS/calendar.js 8:0-41
ERROR in ./node_modules/@fullcalendar/daygrid/main.css 4:0
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
| --------------------------------------------------------------------------------------------------*/
| /* day row structure */
> .fc-dayGridWeek-view .fc-content-skeleton,
| .fc-dayGridDay-view .fc-content-skeleton {
| /* there may be week numbers in these views, so no padding-top */
@ ./src/main/webapp/sources/JS/calendar.js 7:0-40
ERROR in ./node_modules/@fullcalendar/list/main.css 4:0
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
| --------------------------------------------------------------------------------------------------*/
| /* possibly reusable */
> .fc-event-dot {
| display: inline-block;
| width: 10px;
@ ./src/main/webapp/sources/JS/calendar.js 9:0-37