goofy ass theme + tooltip integration

package-lock.json

@@ -8,12 +8,16 @@
       "name": "cal_filter_js",
       "version": "0.0.0",
       "dependencies": {
+        "@fullcalendar/bootstrap5": "^6.1.17",
         "@fullcalendar/core": "^6.1.17",
         "@fullcalendar/daygrid": "^6.1.17",
         "@fullcalendar/icalendar": "^6.1.17",
         "@fullcalendar/list": "^6.1.17",
         "@fullcalendar/multimonth": "^6.1.17",
-        "@fullcalendar/timegrid": "^6.1.17"
+        "@fullcalendar/timegrid": "^6.1.17",
+        "bootstrap": "^5.3.6",
+        "bootstrap-icons": "^1.13.1",
+        "tippy.js": "^6.3.7"
       },
       "devDependencies": {
         "vite": "^6.3.5"
@@ -444,6 +448,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fullcalendar/bootstrap5": {
+      "version": "6.1.17",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/bootstrap5/-/bootstrap5-6.1.17.tgz",
+      "integrity": "sha512-8B6a7QvHzTOlBBfvZeN38wLs8+eL65Mwh0wfqRNkwJXkNtLw8mow3KJ8tZR6epNnhrcY/6TyyVWo5AJab2uENg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.17"
+      }
+    },
     "node_modules/@fullcalendar/core": {
       "version": "6.1.17",
       "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.17.tgz",
@@ -505,6 +518,16 @@
         "@fullcalendar/core": "~6.1.17"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.40.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.2.tgz",
@@ -792,6 +815,41 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.6",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.6.tgz",
+      "integrity": "sha512-jX0GAcRzvdwISuvArXn3m7KZscWWFAf1MKBcnzaN02qWMb3jpMoUX4/qgeiGzqyIb4ojulRzs89UCUmGcFSzTA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
+    "node_modules/bootstrap-icons": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.1.tgz",
+      "integrity": "sha512-ijombt4v6bv5CLeXvRWKy7CuM3TRTuPEuGaGKvTV5cz65rQSY8RQ2JcHt6b90cBBAC7s8fsf2EkQDldzCoXUjw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/esbuild": {
       "version": "0.25.4",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.4.tgz",
@@ -1015,6 +1073,15 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
     "node_modules/vite": {
       "version": "6.3.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",

package.json

@@ -12,11 +12,15 @@
     "vite": "^6.3.5"
   },
   "dependencies": {
+    "@fullcalendar/bootstrap5": "^6.1.17",
     "@fullcalendar/core": "^6.1.17",
     "@fullcalendar/daygrid": "^6.1.17",
     "@fullcalendar/icalendar": "^6.1.17",
     "@fullcalendar/list": "^6.1.17",
     "@fullcalendar/multimonth": "^6.1.17",
-    "@fullcalendar/timegrid": "^6.1.17"
+    "@fullcalendar/timegrid": "^6.1.17",
+    "bootstrap": "^5.3.6",
+    "bootstrap-icons": "^1.13.1",
+    "tippy.js": "^6.3.7"
   }
 }

src/main.js

@@ -4,23 +4,77 @@ import listPlugin from "@fullcalendar/list";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
 // import multiMonthPlugin from "@fullcalendar/multimonth";
+import "bootstrap/dist/css/bootstrap.css";
+import "bootstrap-icons/font/bootstrap-icons.css";
+import bootstrap5Plugin from "@fullcalendar/bootstrap5";
+
+import tippy, { followCursor } from "tippy.js";
+import "tippy.js/dist/tippy.css";
 
 const text_field = document.getElementById("ics_file");
 const confirm_button = document.getElementById("ics_run");
 const cal = document.getElementById("calendar");
+let currentTippy = null;
+
+const new_tippy = (info) => {
+  if (info.el._tippy === currentTippy) {
+    currentTippy.show();
+  } // what does this even MEAN
+  else if (info.event.extendedProps.description) {
+    // Destroy previous tippy if exists
+    if (currentTippy) {
+      currentTippy.destroy();
+      currentTippy = null;
+    }
+    currentTippy = tippy(info.el, {
+      content: info.event.extendedProps.description,
+      allowHTML: true,
+      theme: "light",
+      interactive: true,
+      // interactiveDebounce: 200,
+      interactiveBorder: 20,
+      delay: [0, 300],
+      // trigger: "manual", // this to then call .show()/
+      // followCursor: "initial",
+      // plugins: [followCursor],
+    });
+    // Show the tooltip
+    // currentTippy.show();
+  }
+  // console.log(currentTippy);
+};
+
+const tippy_die = (info) => {
+  // if hovering current tippy then dont die. if not kill kill kill
+  // if (currentTippy) {
+  //   currentTippy.destroy();
+  //   currentTippy = null;
+  // }
+  // fuck it
+  currentTippy.hideWithInteractivity(info.jsEvent);
+};
 
 confirm_button.addEventListener("click", (_e) => {
   console.log("nawgh:", text_field.value);
   if (text_field.value) {
     const calendar = new Calendar(cal, {
-      plugins: [listPlugin, iCalendarPlugin, timeGridPlugin, dayGridPlugin],
+      plugins: [
+        bootstrap5Plugin,
+        listPlugin,
+        iCalendarPlugin,
+        timeGridPlugin,
+        dayGridPlugin,
+      ],
       initialView: "listWeek",
       // multiMonthMaxColumns: 1,
       navLinks: true,
+      dayMaxEvents: true,
+      nowIndicator: true,
+      weekNumbers: true,
       headerToolbar: {
-        left: "prev,next today",
+        left: "prev,next",
         center: "title",
-        right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek", // Add the views you want
+        right: "today dayGridMonth,timeGridWeek,timeGridDay,listWeek", // Add the views you want
       },
       views: {
         dayGridMonth: { buttonText: "Month" },
@@ -33,8 +87,15 @@ confirm_button.addEventListener("click", (_e) => {
         url: text_field.value,
         format: "ics",
       },
+      // eventClick: new_tippy,
+      eventMouseEnter: new_tippy,
+      eventMouseLeave: tippy_die,
     });
 
     calendar.render();
   }
 });
+
+// text_field.value = "http://127.0.0.1:8080/filtered-ics";
+// confirm_button.click();
+// wow