.gitignore

@@ -1,4 +1,3 @@
 /node_modules/
 /.cache/
 /dist/
-/.log/

.prettierignore

@@ -1 +0,0 @@
-pnpm-lock.yaml

babel.config.js

@@ -1,9 +1,7 @@
 module.exports = {
   plugins: ['@babel/plugin-transform-runtime'],
   presets: [
-    [
-      '@babel/preset-env',
-      {
+    ['@babel/preset-env', {
         useBuiltIns: 'usage',
         corejs: 3,
       },

package.json

@@ -1,8 +1,7 @@
 {
   "browserslist": [
     "defaults",
-    "ios 8.4",
-    "ios 5.1"
+    "ios 8.4"
   ],
   "scripts": {
     "start": "npm run serve",
@@ -10,26 +9,26 @@
     "serve": "webpack serve"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@babel/plugin-transform-runtime": "^7.18.6",
-    "@babel/preset-env": "^7.18.6",
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-transform-runtime": "^7.16.0",
+    "@babel/preset-env": "^7.16.0",
     "@types/intl": "^1.2.0",
-    "babel-loader": "^8.2.5",
-    "css-loader": "^6.7.1",
+    "babel-loader": "^8.2.3",
+    "css-loader": "^6.5.1",
     "file-loader": "^6.2.0",
     "style-loader": "^3.3.1",
-    "ts-loader": "^9.3.1",
-    "typescript": "^4.7.4",
-    "webpack": "^5.73.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.2"
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.2.3",
+    "webpack": "^5.64.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.4.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.6",
-    "@fullcalendar/core": "^5.11.0",
-    "@fullcalendar/icalendar": "^5.11.0",
-    "@fullcalendar/resource-timegrid": "^5.11.0",
-    "core-js": "^3.23.3",
+    "@fullcalendar/core": "^5.10.0",
+    "@fullcalendar/icalendar": "^5.10.1",
+    "@fullcalendar/resource-timegrid": "^5.10.1",
+    "core-js": "^3.19.1",
+    "ical.js": "github:ekreative/ical.js#var-ical",
     "intl": "^1.2.5",
     "unique-colors": "^1.0.1"
   }

src/index.css

@@ -11,7 +11,7 @@
 }
 
 .fc .fc-timegrid-now-indicator-line {
-  border-color: rgba(255, 0, 0, 0.4);
+  border-color: rgba(255, 0, 0, .4);
   border-top-width: 1px;
   border-top-color: red;
   border-bottom-width: 9px;

src/index.ts

@@ -1,11 +1,13 @@
-import 'core-js/stable/url';
-import 'core-js/stable/function';
-
-import Intl from 'intl';
+// TODO: could probably be a dynamic import
+import intl from 'intl';
 import 'intl/locale-data/jsonp/en.js';
-window.Intl = Intl;
 
-import { Calendar, CalendarOptions } from '@fullcalendar/core';
+if (!window.Intl) {
+  // No `Intl`, so use and load the polyfill.
+  window.Intl = intl;
+}
+
+import { EventInput, Calendar, CalendarOptions } from '@fullcalendar/core';
 import iCalendarPlugin from '@fullcalendar/icalendar';
 import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
 
@@ -29,6 +31,22 @@ const colors: string[] = unique_colors(Object.keys(calendars).length);
 const urlParams = new URLSearchParams(window.location.search);
 const toolFilter: string[] | undefined = urlParams.get('tool')?.split(';');
 
+function eventDataTransform(eventData: EventInput): EventInput {
+  // clear the url to prevent clicking on the event
+  delete eventData.url;
+
+  const match = eventData?.title?.match(/([^\/]*) \| ([^-]*) - (.*)/);
+  if (match) {
+    const [, member, shop, tool] = match;
+    eventData.title = `${member}`;
+    eventData.resourceId = tool;
+    if (!toolFilter) {
+      calendar.addResource({ id: tool, title: tool }, false);
+    }
+  }
+  return eventData;
+}
+
 const calendarOptions: CalendarOptions = {
   schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
   plugins: [iCalendarPlugin, resourceTimeGridPlugin],
@@ -44,6 +62,14 @@ const calendarOptions: CalendarOptions = {
     startTime: '10:00',
     endTime: '21:00',
   },
+  eventSources: Object.values(calendars).map((id, idx) => {
+    return {
+      url: '/calendar/ical/' + id + '/public/basic.ics',
+      format: 'ics',
+      color: colors[idx],
+      eventDataTransform: eventDataTransform,
+    };
+  }),
   slotLabelFormat: {
     hour: 'numeric',
     minute: '2-digit',
@@ -64,31 +90,8 @@ const calendarOptions: CalendarOptions = {
     : [],
 };
 
-function main() {
 const calendarEl = document.getElementById('calendar');
 const calendar = new Calendar(calendarEl!, calendarOptions);
-  Object.values(calendars).forEach((id, idx) =>
-    calendar.addEventSource({
-      url: '/calendar/ical/' + id + '/public/basic.ics',
-      format: 'ics',
-      color: colors[idx],
-      eventDataTransform: (eventData) => {
-        // clear the url to prevent clicking on the event
-        delete eventData.url;
-
-        const match = eventData?.title?.match(/([^\/]*) \| ([^-]*) - (.*)/);
-        if (match) {
-          const [, member, shop, tool] = match;
-          eventData.title = `${member}`;
-          eventData.resourceId = tool;
-          if (!toolFilter) {
-            calendar.addResource({ id: tool, title: tool }, false);
-          }
-        }
-        return eventData;
-      },
-    })
-  );
 
 calendar.render();
 
@@ -99,6 +102,3 @@ function main() {
 
 // refresh data every five minutes
 window.setInterval(refresh, 5 * 60 * 1000);
-}
-
-main();

src/intl.d.ts

@@ -1 +0,0 @@
-declare module 'intl/locale-data/jsonp/en.js';

webpack.config.js

@@ -11,7 +11,7 @@ module.exports = {
       },
     },
   },
-  devtool: 'source-map',
+  devtool: "eval-cheap-source-map",
   module: {
     rules: [
       {
@@ -22,19 +22,27 @@ module.exports = {
       {
         test: /\.tsx?$/,
         exclude: /node_modules/,
-        use: ['babel-loader', 'ts-loader'],
+        use: [
+          'babel-loader',
+          {
+            loader: 'ts-loader',
+            options: {
+              appendTsSuffixTo: [/\.vue$/],
+            },
+          }
+        ],
       },
       {
         test: /\.css$/i,
-        use: ['style-loader', 'css-loader'],
+        use: ["style-loader", "css-loader"],
       },
       {
         test: /\/index.html$/i,
         use: {
-          loader: 'file-loader',
+          loader: "file-loader",
           options: {
             name: '[name].[ext]',
-          },
+          }
         },
       },
     ],