Update FullCalendar + Temporal

package.json

@@ -10,10 +10,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/server": "^11.11.0",
     "@fontsource-variable/inter": "^5.2.8",
-    "@fullcalendar/core": "^6.1.20",
-    "@fullcalendar/interaction": "^6.1.20",
-    "@fullcalendar/react": "^6.1.20",
-    "@fullcalendar/timegrid": "^6.1.20",
+    "@fullcalendar/react": "7.0.0-rc.1",
     "@react-router/node": "^7.14.1",
     "@rjsf/chakra-ui": "^6.4.2",
     "@rjsf/core": "^6.4.2",
@@ -30,8 +27,9 @@
     "react-dom": "^19.2.4",
     "react-icons": "^5.6.0",
     "react-router": "^7.14.1",
-    "rrule": "^2.8.1",
+    "rrule-temporal": "^1.5.2",
     "smol-toml": "^1.6.1",
+    "temporal-polyfill": "^0.3.2",
     "timezones-ical-library": "^2.1.3"
   },
   "scripts": {

src/components/Calendar.module.css

@@ -0,0 +1,116 @@
+:global(:root) {
+  /* primary */
+  --fc-monarch-primary: rgb(65 95 145);
+  --fc-monarch-primary-foreground: rgb(255 255 255);
+  --fc-monarch-primary-over: #526e9c;
+  --fc-monarch-primary-down: #647ea7;
+
+  /* secondary */
+  --fc-monarch-secondary: rgb(214 227 255);
+  --fc-monarch-secondary-foreground: rgb(40 71 119);
+  --fc-monarch-secondary-over: #c9d6f2;
+  --fc-monarch-secondary-down: #bdc9e5;
+
+  /* tertiary */
+  --fc-monarch-tertiary: rgb(133 93 140);
+  --fc-monarch-tertiary-foreground: rgb(255 255 255);
+  --fc-monarch-tertiary-over: #916c97;
+  --fc-monarch-tertiary-down: #9d7ca2;
+
+  /* calendar content */
+  --fc-monarch-event: var(--fc-monarch-primary);
+  --fc-monarch-event-contrast: var(--fc-monarch-primary-foreground);
+  --fc-monarch-highlight: #d6e3ff4d;
+  --fc-monarch-now: rgb(186 26 26);
+
+  /* controls */
+  --fc-monarch-selected: rgb(86 95 113);
+  --fc-monarch-selected-foreground: rgb(255 255 255);
+  --fc-monarch-selected-over: #656e7e;
+  --fc-monarch-selected-down: #757d8c;
+  --fc-monarch-outline: #6687ff;
+
+  /* popover */
+  --fc-monarch-popover: var(--fc-monarch-background);
+
+  /* neutral backgrounds */
+  --fc-monarch-background: var(--chakra-colors-bg);
+  --fc-monarch-faint: var(--chakra-colors-bg-subtle);
+  --fc-monarch-muted: var(--chakra-colors-bg-muted);
+  --fc-monarch-strong: var(--chakra-colors-bg-emphasized);
+  --fc-monarch-stronger: var(--chakra-colors-bg-solid);
+  --fc-monarch-strongest: var(--chakra-colors-bg-focus-ring);
+
+  /* neutral foregrounds */
+  --fc-monarch-foreground: var(--chakra-colors-fg);
+  --fc-monarch-faint-foreground: var(--chakra-colors-fg-subtle);
+  --fc-monarch-muted-foreground: var(--chakra-colors-fg-muted);
+
+  /* neutral borders */
+  --fc-monarch-border: var(--chakra-colors-border-emphasized);
+  --fc-monarch-strong-border: var(--chakra-colors-border-inverted);
+}
+
+@media not print {
+  :global(.dark) {
+    /* primary */
+    --fc-monarch-primary: rgb(170 199 255);
+    --fc-monarch-primary-foreground: rgb(10 48 95);
+    --fc-monarch-primary-over: #b2cdff;
+    --fc-monarch-primary-down: #bbd2ff;
+
+    /* secondary */
+    --fc-monarch-secondary: rgb(40 71 119);
+    --fc-monarch-secondary-foreground: rgb(214 227 255);
+    --fc-monarch-secondary-over: #32507e;
+    --fc-monarch-secondary-down: #3c5885;
+
+    /* tertiary */
+    --fc-monarch-tertiary: rgb(221 188 224);
+    --fc-monarch-tertiary-foreground: rgb(63 40 68);
+    --fc-monarch-tertiary-over: #e0c3e3;
+    --fc-monarch-tertiary-down: #e4c9e6;
+
+    /* calendar content */
+    --fc-monarch-event: var(--fc-monarch-primary);
+    --fc-monarch-event-contrast: var(--fc-monarch-primary-foreground);
+    --fc-monarch-highlight: #2847774d;
+    --fc-monarch-now: rgb(255 180 171);
+
+    /* controls */
+    --fc-monarch-selected: rgb(190 198 220);
+    --fc-monarch-selected-foreground: rgb(40 49 65);
+    --fc-monarch-selected-over: #c4cce0;
+    --fc-monarch-selected-down: #cbd1e3;
+
+    /* popover */
+    --fc-monarch-popover: rgb(17 19 24);
+    --fc-monarch-popover-foreground: rgb(226 226 233);
+  }
+}
+
+/* THIS ONE */
+.fc-slot-header-inner {
+  line-height: 0.1rem;
+  padding-block: 0.2rem;
+  opacity: 0.7;
+  font-size: 0.75rem;
+}
+
+.fc-day-header-inner {
+  font-size: 0.8rem;
+  letter-spacing: 0.05rem;
+}
+
+.fc-event {
+  cursor: pointer;
+}
+
+.fc-event-inner {
+  padding-top: 0.25rem;
+  padding-inline-start: 0.5rem;
+}
+
+.fc-event-inner > * {
+  padding-block: 0rem;
+}