Adjust polyfills to support Safari on iOS 5.1.1 (ie iPad 1)

Just load them directly instead of dynamically importing because this
version doesn't seem to support promises natively

.gitignore

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

.prettierignore

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

babel.config.js

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

package.json

@@ -1,7 +1,8 @@
 {
   "browserslist": [
     "defaults",
-    "ios 8.4"
+    "ios 8.4",
+    "ios 5.1"
   ],
   "scripts": {
     "start": "npm run serve",
@@ -9,26 +10,26 @@
     "serve": "webpack serve"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
+    "@babel/core": "^7.18.6",
-    "@babel/plugin-transform-runtime": "^7.16.0",
+    "@babel/plugin-transform-runtime": "^7.18.6",
-    "@babel/preset-env": "^7.16.0",
+    "@babel/preset-env": "^7.18.6",
     "@types/intl": "^1.2.0",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^8.2.5",
-    "css-loader": "^6.5.1",
+    "css-loader": "^6.7.1",
     "file-loader": "^6.2.0",
     "style-loader": "^3.3.1",
-    "ts-loader": "^9.2.6",
+    "ts-loader": "^9.3.1",
-    "typescript": "^4.2.3",
+    "typescript": "^4.7.4",
-    "webpack": "^5.64.0",
+    "webpack": "^5.73.0",
-    "webpack-cli": "^4.9.1",
+    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.4.0"
+    "webpack-dev-server": "^4.9.2"
   },
   "dependencies": {
-    "@fullcalendar/core": "^5.10.0",
+    "@babel/runtime": "^7.18.6",
-    "@fullcalendar/icalendar": "^5.10.1",
+    "@fullcalendar/core": "^5.11.0",
-    "@fullcalendar/resource-timegrid": "^5.10.1",
+    "@fullcalendar/icalendar": "^5.11.0",
-    "core-js": "^3.19.1",
+    "@fullcalendar/resource-timegrid": "^5.11.0",
-    "ical.js": "github:ekreative/ical.js#var-ical",
+    "core-js": "^3.23.3",
     "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, .4);
+  border-color: rgba(255, 0, 0, 0.4);
   border-top-width: 1px;
   border-top-color: red;
   border-bottom-width: 9px;

src/index.ts

@@ -1,13 +1,11 @@
-// TODO: could probably be a dynamic import
+import 'core-js/stable/url';
-import intl from 'intl';
+import 'core-js/stable/function';
+
+import Intl from 'intl';
 import 'intl/locale-data/jsonp/en.js';
+window.Intl = Intl;
 
-if (!window.Intl) {
+import { Calendar, CalendarOptions } from '@fullcalendar/core';
-  // 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';
 
@@ -31,22 +29,6 @@ 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],
@@ -62,14 +44,6 @@ 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',
@@ -90,15 +64,41 @@ const calendarOptions: CalendarOptions = {
     : [],
 };
 
-const calendarEl = document.getElementById('calendar');
+function main() {
-const calendar = new Calendar(calendarEl!, calendarOptions);
+  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;
 
-calendar.render();
+        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;
+      },
+    })
+  );
 
-function refresh() {
+  calendar.render();
-  calendar.refetchEvents();
+
-  calendar.today();
+  function refresh() {
+    calendar.refetchEvents();
+    calendar.today();
+  }
+
+  // refresh data every five minutes
+  window.setInterval(refresh, 5 * 60 * 1000);
 }
 
-// refresh data every five minutes
+main();
-window.setInterval(refresh, 5 * 60 * 1000);

src/intl.d.ts

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

webpack.config.js

@@ -11,7 +11,7 @@ module.exports = {
       },
     },
   },
-  devtool: "eval-cheap-source-map",
+  devtool: 'source-map',
   module: {
     rules: [
       {
@@ -22,27 +22,19 @@ module.exports = {
       {
         test: /\.tsx?$/,
         exclude: /node_modules/,
-        use: [
+        use: ['babel-loader', 'ts-loader'],
-          '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]',
-          }
+          },
         },
       },
     ],