I'm trying to use a color calendar and I'm following the tutorials they saw in the demos and documentation like this:
// js/calendar.js import Calendar from '../node_modules/color-calendar'; import '../node_modules/color-calendar/dist/css/theme-glass.css'; let calA = new Calendar({ id: "#color-calendar", theme: "glass", // border: "5px solid black", weekdayType: "long-upper", monthDisplayType: "long", // headerColor: "yellow", // headerBackgroundColor: "black", calendarSize: "small", layoutModifiers: ["month-left-align"], eventsData: [ { id: 1, name: "French class", start: "2020-12-17T06:00:00", end: "2020-12-18T20:30:00" }, { id: 2, name: "Blockchain 101", start: "2020-12-20T10:00:00", end: "2020-12-20T11:30:00" }, { id: 3, name: "Cheese 101", start: "2020-12-01T10:00:00", end: "2020-12-02T11:30:00" }, { id: 4, name: "Cheese 101", start: "2020-12-01T10:00:00", end: "2020-12-02T11:30:00" } ], dateChanged: (currentDate, events) => { console.log("date change", currentDate, events); }, monthChanged: (currentDate, events) => { console.log("month change", currentDate, events); } });
and my HTML:
// dashboard.html ... <div class="col"> <div class="calendar-container"> <div id="color-calendar"></div> <div id="events-display"></div> </div> </div> ... <script type="module" src="js/calendar.js"></script>
I tried using http-server and Live Server extension to check if it solved the problem but the problem persists.
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.
I got these two on my dev tools console
For additional information, this is my package.json
{ "dependencies": { "color-calendar": "^1.0.7", "http-server": "^14.1.1" } }
I don't know what to do anymore...no Node.js, no frameworks, just using javascript, html and css.
The solution brought by Konrad and Stefino76 worked.
I installed webpack on my project and configured it to accept js and css in .js files and now the calendar works!
All credit should go to them, but I don't think I can mark their answer as solved.