diff --git a/package-lock.json b/package-lock.json
index 8a54b08c..c8ea6940 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,10 +13,7 @@
         "@emotion/react": "^11.14.0",
         "@emotion/server": "^11.11.0",
         "@fontsource-variable/inter": "^5.3.0",
-        "@fullcalendar/core": "^6.1.21",
-        "@fullcalendar/interaction": "^6.1.21",
-        "@fullcalendar/react": "^6.1.21",
-        "@fullcalendar/timegrid": "^6.1.21",
+        "@fullcalendar/react": "^7.0.1",
         "@react-router/node": "^8.2.0",
         "@rjsf/chakra-ui": "^6.7.0",
         "@rjsf/core": "^6.7.0",
@@ -33,8 +30,9 @@
         "react-dom": "^19.2.8",
         "react-icons": "^5.7.0",
         "react-router": "^8.2.0",
-        "rrule": "^2.8.1",
+        "rrule-temporal": "^1.5.3",
         "smol-toml": "^1.7.0",
+        "temporal-polyfill": "^1.0.1",
         "timezones-ical-library": "^2.3.0"
       },
       "devDependencies": {
@@ -1674,54 +1672,38 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
-    "node_modules/@fullcalendar/core": {
-      "version": "6.1.21",
-      "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.21.tgz",
-      "integrity": "sha512-t3u/+sqh3Iq7TWtUnVLcGDUE6OWZh0UD3c04bI/l7lSLAgAKr3kngBmhHiQD1QXpwC8ZN5iNqG7a7gOVixhSKQ==",
-      "license": "MIT",
-      "dependencies": {
-        "preact": "~10.12.1"
-      }
-    },
-    "node_modules/@fullcalendar/daygrid": {
-      "version": "6.1.21",
-      "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.21.tgz",
-      "integrity": "sha512-QYb1y40RGYLlOxKpYWg8O+7njEnKnFG8Tt7qjnubJGR35s1phQg67E+81y2TyAbbm59p2JFOCXGDk9t6KDujIA==",
+    "node_modules/@full-ui/headless-calendar": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@full-ui/headless-calendar/-/headless-calendar-7.0.1.tgz",
+      "integrity": "sha512-ridxaPRKiSzfeXkk8kta1wC9asYqPWXf4q0KbUW5hRvWQ1rkxeUbhBarcMEOFC7FvJHczPSAm0JzSrXv/ykuKw==",
       "license": "MIT",
       "peerDependencies": {
-        "@fullcalendar/core": "~6.1.21"
+        "temporal-polyfill": "^1.0.1"
       }
     },
-    "node_modules/@fullcalendar/interaction": {
-      "version": "6.1.21",
-      "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.21.tgz",
-      "integrity": "sha512-WPYpqtljDWmU0Xm2cOtFrLlocgxv7cgkOppj34Q6OUUat8a6Cnd6kYo2JR+irP223PE5lBYHFNp1qh7SIpJc0w==",
+    "node_modules/@fullcalendar/core": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-7.0.1.tgz",
+      "integrity": "sha512-SRJT4lSRZZGVCz6ss48pFCNiIS7iutpQVID73GFQufH94MTYs+akCW9aKCjMwsnEWad5UV7Mcm4xndFQ4dDi0g==",
       "license": "MIT",
       "peerDependencies": {
-        "@fullcalendar/core": "~6.1.21"
+        "@full-ui/headless-calendar": "7.0.1",
+        "temporal-polyfill": "^1.0.1"
       }
     },
     "node_modules/@fullcalendar/react": {
-      "version": "6.1.21",
-      "resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-6.1.21.tgz",
-      "integrity": "sha512-TLpmGUd5k/PMdCh8XbeFC9PW9wuGvMms1oCxWgXyjK3EFPXAAd0PLfcvwKdyxoAS5eK1E4RJFkjMHvsYHpimcg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@fullcalendar/core": "~6.1.21",
-        "react": "^16.7.0 || ^17 || ^18 || ^19",
-        "react-dom": "^16.7.0 || ^17 || ^18 || ^19"
-      }
-    },
-    "node_modules/@fullcalendar/timegrid": {
-      "version": "6.1.21",
-      "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.21.tgz",
-      "integrity": "sha512-2DnShx/jallGmb8QCkr6pAOu/zuPhJrP7+uTrAtSnbqsX7GF3lTxqSeNGkTQwsgF5g/ia8udhQ+JNYaE+TN1cQ==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-7.0.1.tgz",
+      "integrity": "sha512-R+/YnZVr82eJy3qeA94Kj1xjNta3MU+xkHAKuqTVCriNxUusjaLIskh7bcRt7TJHsoT3OmdSCBgw5fjXjIC9vQ==",
       "license": "MIT",
       "dependencies": {
-        "@fullcalendar/daygrid": "~6.1.21"
+        "@full-ui/headless-calendar": "7.0.1",
+        "@fullcalendar/core": "7.0.1"
       },
       "peerDependencies": {
-        "@fullcalendar/core": "~6.1.21"
+        "react": "^17 || ^18 || ^19",
+        "react-dom": "^17 || ^18 || ^19",
+        "temporal-polyfill": "^1.0.1"
       }
     },
     "node_modules/@humanfs/core": {
@@ -1854,6 +1836,17 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@js-temporal/polyfill": {
+      "name": "temporal-polyfill",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/temporal-polyfill/-/temporal-polyfill-1.0.1.tgz",
+      "integrity": "sha512-N2SoI9olnW7BUsU8RosDphZQl9s+WJ8O7PoJMFCr/e5/1rFkVI4GNOWaSeySG+UoP04foPYsnLWbJmbXOiShZg==",
+      "license": "MIT",
+      "dependencies": {
+        "temporal-spec": "1.0.0",
+        "temporal-utils": "1.0.1"
+      }
+    },
     "node_modules/@msgpackr-extract/msgpackr-extract-darwin-arm64": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.4.tgz",
@@ -6574,16 +6567,6 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/preact": {
-      "version": "10.12.1",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
-      "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/preact"
-      }
-    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -6930,13 +6913,13 @@
         "@rolldown/binding-win32-x64-msvc": "1.1.5"
       }
     },
-    "node_modules/rrule": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/rrule/-/rrule-2.8.1.tgz",
-      "integrity": "sha512-hM3dHSBMeaJ0Ktp7W38BJZ7O1zOgaFEsn41PDk+yHoEtfLV+PoJt9E9xAlZiWgf/iqEqionN0ebHFZIDAp+iGw==",
-      "license": "BSD-3-Clause",
+    "node_modules/rrule-temporal": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/rrule-temporal/-/rrule-temporal-1.5.3.tgz",
+      "integrity": "sha512-qALnXyu4MKNUeykkkO0r6Xxl5or3rM8Cf6ibKIe/29sgmq3tGm1oNq4G1Ddp8Ku3mnKmvC3+3yFAJ3OgOu6OJw==",
+      "license": "MIT",
       "dependencies": {
-        "tslib": "^2.4.0"
+        "@js-temporal/polyfill": "^0.5.1"
       }
     },
     "node_modules/run-parallel": {
@@ -7131,6 +7114,28 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/temporal-polyfill": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/temporal-polyfill/-/temporal-polyfill-1.0.1.tgz",
+      "integrity": "sha512-N2SoI9olnW7BUsU8RosDphZQl9s+WJ8O7PoJMFCr/e5/1rFkVI4GNOWaSeySG+UoP04foPYsnLWbJmbXOiShZg==",
+      "license": "MIT",
+      "dependencies": {
+        "temporal-spec": "1.0.0",
+        "temporal-utils": "1.0.1"
+      }
+    },
+    "node_modules/temporal-spec": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/temporal-spec/-/temporal-spec-1.0.0.tgz",
+      "integrity": "sha512-00Ahj1e1ifaERTMOIIGpOCdOo9IEk2m6GGSMedsn9a2SIsGLdOTbmME1Htv6IM82b6VHrzSUTIVc7YHy6hdhFQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/temporal-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/temporal-utils/-/temporal-utils-1.0.1.tgz",
+      "integrity": "sha512-HAixuesxFQIUaQk3ptX2jhfO/FsOkgVkDDMawvp6n/fkB1q6BKfs3lURw9I+pK/2e2e/q/vrLrxmeqauBoyGMQ==",
+      "license": "MIT"
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
diff --git a/package.json b/package.json
index b7f145a6..1cd74fbc 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/server": "^11.11.0",
     "@fontsource-variable/inter": "^5.3.0",
-    "@fullcalendar/core": "^6.1.21",
-    "@fullcalendar/interaction": "^6.1.21",
-    "@fullcalendar/react": "^6.1.21",
-    "@fullcalendar/timegrid": "^6.1.21",
+    "@fullcalendar/react": "^7.0.1",
     "@react-router/node": "^8.2.0",
     "@rjsf/chakra-ui": "^6.7.0",
     "@rjsf/core": "^6.7.0",
@@ -30,8 +27,9 @@
     "react-dom": "^19.2.8",
     "react-icons": "^5.7.0",
     "react-router": "^8.2.0",
-    "rrule": "^2.8.1",
+    "rrule-temporal": "^1.5.3",
     "smol-toml": "^1.7.0",
+    "temporal-polyfill": "^1.0.1",
     "timezones-ical-library": "^2.3.0"
   },
   "scripts": {
@@ -69,5 +67,8 @@
     "typescript-eslint": "^8.65.0",
     "vite": "^8.1.5",
     "vitest": "^4.1.10"
+  },
+  "overrides": {
+    "@js-temporal/polyfill": "npm:temporal-polyfill@^1.0.1"
   }
 }
diff --git a/src/components/Calendar.css b/src/components/Calendar.css
deleted file mode 100644
index b69ae34c..00000000
--- a/src/components/Calendar.css
+++ /dev/null
@@ -1,67 +0,0 @@
-.fc .fc-scrollgrid,
-.fc .fc-scrollgrid-section > td,
-.fc .fc-timegrid-axis {
-  border-color: transparent;
-}
-
-.fc .fc-timegrid-slot {
-  border-color: var(--chakra-colors-border-emphasized);
-  border-width: 1.5px;
-  border-left-color: transparent;
-}
-
-.fc td,
-.fc th {
-  border-color: var(--chakra-colors-border-emphasized);
-  border-width: 1.5px;
-}
-
-.fc .fc-scrollgrid-section > th:nth-child(1),
-.fc .fc-col-header-cell:last-child {
-  border-right-color: transparent;
-}
-
-.fc .fc-scrollgrid-section-sticky > * {
-  background: transparent;
-}
-
-.fc .fc-col-header-cell .fc-scrollgrid-sync-inner {
-  background: var(--chakra-colors-bg);
-}
-
-.fc .fc-timegrid-event-harness-inset .fc-timegrid-event {
-  box-shadow: var(--chakra-colors-bg) 0px 0px 0px 1.5px;
-}
-
-.fc .fc-scroller-harness {
-  overflow: visible;
-}
-
-.fc .fc-timegrid-slot-label {
-  border: none;
-}
-
-.fc .fc-timegrid-slot-label-frame {
-  position: relative;
-}
-
-.fc .fc-timegrid-slot-label-cushion {
-  font-size: 0.75rem;
-  line-height: 1.3;
-  opacity: 0.7;
-  position: absolute;
-  top: -1.25rem;
-  right: 0.25rem;
-}
-
-.fc .fc-timegrid-event {
-  border-radius: 0;
-  border-width: 0;
-  padding-left: 0.25rem;
-}
-
-.fc .fc-col-header-cell-cushion {
-  font-size: 0.8rem;
-  letter-spacing: 0.05rem;
-  text-transform: uppercase;
-}
diff --git a/src/components/Calendar.module.css b/src/components/Calendar.module.css
new file mode 100644
index 00000000..2d08bc3a
--- /dev/null
+++ b/src/components/Calendar.module.css
@@ -0,0 +1,134 @@
+: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;
+  position: relative;
+  top: -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;
+}
+
+.fc-day-lane {
+  border-width: 1.5px;
+}
+
+.fc-slot-lane {
+  border-width: 1.5px;
+}
+
+.fc-slot-header {
+  border-width: 1.5px;
+}
+
+.fc-slot-header-divider {
+  border-inline-end-width: 1.5px;
+}
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
index e19c9183..01a545c9 100644
--- a/src/components/Calendar.tsx
+++ b/src/components/Calendar.tsx
@@ -1,19 +1,24 @@
 import { useContext, useMemo } from "react";
 
-import { Box, Circle, Float, Text } from "@chakra-ui/react";
+import { Circle, Float, Text } from "@chakra-ui/react";
 import { Tooltip } from "./ui/tooltip";
 
-import FullCalendar from "@fullcalendar/react";
-import type { EventContentArg, EventApi } from "@fullcalendar/core";
-import timeGridPlugin from "@fullcalendar/timegrid";
-import interactionPlugin from "@fullcalendar/interaction";
+import FullCalendar, {
+  type EventDisplayInfo,
+  type EventApi,
+} from "@fullcalendar/react";
+import themePlugin from "@fullcalendar/react/themes/monarch";
+import timeGridPlugin from "@fullcalendar/react/timegrid";
+import interactionPlugin from "@fullcalendar/react/interaction";
 
 import type { Activity } from "../lib/activity";
 import { CustomActivity, Timeslot } from "../lib/activity";
 import { Slot } from "../lib/dates";
 import { HydrantContext } from "../lib/hydrant";
 
-import "./Calendar.css";
+import "@fullcalendar/react/skeleton.css";
+import "@fullcalendar/react/themes/monarch/theme.css";
+import styles from "./Calendar.module.css";
 
 // Threshold at which to display a distance warning, in feet (650 meters)
 const DISTANCE_WARNING_THRESHOLD = 2112;
@@ -21,6 +26,9 @@ const DISTANCE_WARNING_THRESHOLD = 2112;
 // Walking speed, in ft/s (~3 mph)
 const WALKING_SPEED = 4.4;
 
+// User's timezone (for converting between Date and Temporal.PlainDateTime)
+const USER_TZ = Temporal.Now.timeZoneId();
+
 /**
  * Calendar showing all the activities, including the buttons on top that
  * change the schedule option selected.
@@ -71,7 +79,14 @@ export function Calendar() {
       if (!beforeEvent.start || !beforeEvent.room) {
         continue;
       }
-      if (thisEvent.start.getTime() != beforeEvent.end.getTime()) {
+      if (
+        Temporal.Instant.compare(
+          thisEvent.start.toTemporalInstant(),
+          Temporal.PlainDateTime.from(beforeEvent.end)
+            .toZonedDateTime(USER_TZ)
+            .toInstant(),
+        ) !== 0
+      ) {
         continue;
       }
 
@@ -100,59 +115,60 @@ export function Calendar() {
     return undefined;
   };
 
-  const renderEvent = ({ event }: EventContentArg) => {
+  const renderEvent = ({
+    event,
+    titleClass,
+    timeClass,
+    isNarrow,
+    isShort,
+  }: EventDisplayInfo) => {
+    const room = event.extendedProps.room as string | undefined;
+    const activity = event.extendedProps.activity as Activity;
+    const distanceWarning = getDistanceWarning(event);
+    const smallText = isNarrow || isShort;
+
     const TitleText = () => (
       <Text
-        fontSize="sm"
+        fontSize={smallText ? "xs" : "sm"}
         fontWeight="medium"
-        overflow="hidden"
-        textOverflow="clip"
-        whiteSpace="nowrap"
+        className={titleClass}
       >
         {event.title}
       </Text>
     );
 
-    const room = event.extendedProps.room as string | undefined;
-    const activity = event.extendedProps.activity as Activity;
-    const distanceWarning = getDistanceWarning(event);
+    const RoomText = () => (
+      <Text fontSize={smallText ? "2xs" : "xs"} className={timeClass}>
+        {room}
+      </Text>
+    );
 
     return (
       <>
-        <Box
-          color={event.textColor}
-          overflow="hidden"
-          p={0.5}
-          lineHeight={1.3}
-          cursor="pointer"
-          height="100%"
-          position="relative"
-        >
-          {!(activity instanceof CustomActivity) ? (
-            <Tooltip
-              content={activity.name}
-              portalled
-              positioning={{ placement: "top" }}
-            >
-              {TitleText()}
-            </Tooltip>
-          ) : (
-            <TitleText />
-          )}
-          {event.extendedProps.roomClarification ? (
-            <Tooltip
-              content={event.extendedProps.roomClarification as string}
-              portalled
-              positioning={{ placement: "top" }}
-            >
-              <Text fontSize="xs">{room}</Text>
-            </Tooltip>
-          ) : (
-            <Text fontSize="xs">{room}</Text>
-          )}
-        </Box>
+        {!(activity instanceof CustomActivity) ? (
+          <Tooltip
+            content={activity.name}
+            portalled
+            positioning={{ placement: "top" }}
+          >
+            {TitleText()}
+          </Tooltip>
+        ) : (
+          <TitleText />
+        )}
+        {event.extendedProps.roomClarification ? (
+          <Tooltip
+            content={event.extendedProps.roomClarification as string}
+            portalled
+            positioning={{ placement: "top" }}
+          >
+            {RoomText()}
+          </Tooltip>
+        ) : (
+          <RoomText />
+        )}
         {distanceWarning ? (
-          <Float placement="top-end">
+          <Float placement="top-end" offsetX={1.5} offsetY={-0.5}>
             <Tooltip
               content={distanceWarning}
               portalled
@@ -163,6 +179,9 @@ export function Calendar() {
                 bg="orange.solid"
                 color="orange.contrast"
                 boxShadow="lg"
+                cursor={"initial"}
+                colorPalette={"orange"}
+                _print={{ boxShadow: "none" }}
               >
                 !
               </Circle>
@@ -175,12 +194,15 @@ export function Calendar() {
 
   return (
     <FullCalendar
-      plugins={[timeGridPlugin, interactionPlugin]}
+      plugins={[themePlugin, timeGridPlugin, interactionPlugin]}
+      borderless={true}
       initialView="timeGridWeek"
       allDaySlot={false}
       dayHeaderFormat={{ weekday: "short" }}
       editable={false}
       events={events}
+      eventClass={styles["fc-event"]}
+      eventInnerClass={styles["fc-event-inner"]}
       eventContent={renderEvent}
       eventClick={(e) => {
         // extendedProps: non-standard props of {@link Event.eventInputs}
@@ -188,23 +210,36 @@ export function Calendar() {
       }}
       headerToolbar={false}
       height="auto"
-      // a date that is, conveniently enough, a monday
-      initialDate="2001-01-01"
-      slotDuration="00:30:00"
-      slotLabelFormat={({ date }) => {
-        const { hour } = date;
+      eventShortHeight={30}
+      initialDate={(() => {
+        const now = Temporal.Now.plainDateISO();
+        return now.subtract({ days: now.dayOfWeek - 1 }).toString();
+      })()}
+      slotDuration={Temporal.Duration.from({ minutes: 30 })}
+      slotHeaderContent={({ time }) => {
+        const milliseconds = time?.milliseconds ?? 0;
+        const hour = Temporal.Duration.from({ milliseconds }).total({
+          unit: "hour",
+        });
         return hour === 12
           ? "noon"
           : hour < 12
             ? `${hour.toString()} AM`
             : `${(hour - 12).toString()} PM`;
       }}
+      slotHeaderInnerClass={styles["fc-slot-header-inner"]}
+      slotHeaderDividerClass={styles["fc-slot-header-divider"]}
+      dayLaneClass={styles["fc-day-lane"]}
+      slotLaneClass={styles["fc-slot-lane"]}
+      slotHeaderClass={styles["fc-slot-header"]}
+      dayHeaderContent={({ text }) => text.toLocaleUpperCase()}
+      dayHeaderInnerClass={styles["fc-day-header-inner"]}
       slotMinTime={
-        events.some((e) => (e.start as Date).getHours() < 8)
-          ? "06:00:00"
-          : "08:00:00"
+        events.some((e) => Temporal.PlainDateTime.from(e.start).hour < 8)
+          ? Temporal.Duration.from({ hours: 6 })
+          : Temporal.Duration.from({ hours: 8 })
       }
-      slotMaxTime="22:00:00"
+      slotMaxTime={Temporal.Duration.from({ hours: 22 })}
       weekends={false}
       selectable={viewedActivity instanceof CustomActivity}
       select={(e) => {
@@ -212,8 +247,18 @@ export function Calendar() {
           state.addTimeslot(
             viewedActivity,
             Timeslot.fromStartEnd(
-              Slot.fromStartDate(e.start),
-              Slot.fromStartDate(e.end),
+              Slot.fromStartDate(
+                e.start
+                  .toTemporalInstant()
+                  .toZonedDateTimeISO(USER_TZ)
+                  .toPlainDateTime(),
+              ),
+              Slot.fromStartDate(
+                e.end
+                  .toTemporalInstant()
+                  .toZonedDateTimeISO(USER_TZ)
+                  .toPlainDateTime(),
+              ),
             ),
           );
         }
diff --git a/src/components/SelectedActivities.tsx b/src/components/SelectedActivities.tsx
index f37cf528..a1b20893 100644
--- a/src/components/SelectedActivities.tsx
+++ b/src/components/SelectedActivities.tsx
@@ -12,12 +12,19 @@ export function ColorButton(
   props: ComponentPropsWithoutRef<"button"> & { color: string },
 ) {
   const { children, color, style, ...otherProps } = props;
+  const contractColor = textColor(color);
   return (
     <Button
       {...otherProps}
       backgroundColor={color}
+      _hover={{
+        backgroundColor: `color-mix(in oklab, ${color} 92%, ${contractColor})`,
+      }}
+      _active={{
+        backgroundColor: `color-mix(in oklab, ${color} 85%, ${contractColor}) !important`,
+      }}
       borderColor={color}
-      color={textColor(color)}
+      color={contractColor}
       style={{
         ...style,
       }}
diff --git a/src/lib/activity.ts b/src/lib/activity.ts
index 6702fd77..74c2565b 100644
--- a/src/lib/activity.ts
+++ b/src/lib/activity.ts
@@ -1,4 +1,4 @@
-import type { EventInput } from "@fullcalendar/core";
+import type { EventInput } from "@fullcalendar/react";
 import { nanoid } from "nanoid";
 
 import type { ColorScheme } from "./colors";
@@ -9,6 +9,12 @@ import { sum } from "./utils";
 import type { PEClass } from "./pe";
 import type { Class } from "./class";
 
+interface ActivityEventInput extends EventInput {
+  room?: string;
+  start: string;
+  end: string;
+}
+
 /** A period of time, spanning several Slots. */
 export class Timeslot {
   startSlot: Slot;
@@ -30,12 +36,12 @@ export class Timeslot {
   }
 
   /** The start time, on the week of 2001-01-01. */
-  get startTime(): Date {
+  get startTime(): Temporal.PlainDateTime {
     return this.startSlot.startDate;
   }
 
   /** The end time, on the week of 2001-01-01. */
-  get endTime(): Date {
+  get endTime(): Temporal.PlainDateTime {
     return this.endSlot.startDate;
   }
 
@@ -132,19 +138,14 @@ export class Event {
   }
 
   /** List of events that can be directly given to FullCalendar. */
-  get eventInputs(): (EventInput & {
-    start: Date;
-    end: Date;
-    room?: string;
-  })[] {
+  get eventInputs(): ActivityEventInput[] {
     const color = this.activity.backgroundColor;
     return this.slots.map((slot) => ({
-      textColor: textColor(color),
+      contrastColor: textColor(color),
       title: this.name,
-      start: slot.startTime,
-      end: slot.endTime,
-      backgroundColor: color,
-      borderColor: color,
+      start: slot.startTime.toString(),
+      end: slot.endTime.toString(),
+      color: color,
       room: this.room,
       roomClarification: this.roomClarification,
       activity: this.activity,
@@ -197,7 +198,7 @@ export class CustomActivity implements BaseActivity {
   addTimeslot(slot: Timeslot): void {
     if (
       this.timeslots.find((slot_) => slot_.equals(slot)) ||
-      slot.startTime.getDate() !== slot.endTime.getDate()
+      slot.startTime.day !== slot.endTime.day
     )
       return;
     this.timeslots.push(slot);
diff --git a/src/lib/dates.ts b/src/lib/dates.ts
index 8ca1b753..9fab257f 100644
--- a/src/lib/dates.ts
+++ b/src/lib/dates.ts
@@ -77,11 +77,11 @@ export class Slot {
   }
 
   /** Converts a date, within 6 AM to 11 PM, to a slot. */
-  static fromStartDate(date: Date): Slot {
+  static fromStartDate(date: Temporal.PlainDateTime): Slot {
     return new Slot(
-      TIMESLOTS * (date.getDay() - 1) +
-        2 * (date.getHours() - 6) +
-        Math.floor(date.getMinutes() / 30),
+      TIMESLOTS * (date.dayOfWeek - 1) +
+        2 * (date.hour - 6) +
+        Math.floor(date.minute / 30),
     );
   }
 
@@ -98,29 +98,25 @@ export class Slot {
   }
 
   /**
-   * The (local timezone) date on the day of date that this starts in. Assumes
+   * The datetime on the day of date that this starts in. Assumes
    * that date is the right day of the week.
    */
-  onDate(date: Date): Date {
+  onDate(date: Temporal.PlainDate): Temporal.PlainDateTime {
     const hour = Math.floor((this.slot % TIMESLOTS) / 2) + 6;
     const minute = (this.slot % 2) * 30;
-    return new Date(
-      date.getFullYear(),
-      date.getMonth(),
-      date.getDate(),
-      hour,
-      minute,
-    );
+
+    const time = Temporal.PlainTime.from({ hour, minute });
+    return date.toPlainDateTime(time);
   }
 
-  /** The date in the week of 2001-01-01 that this starts in. */
-  get startDate(): Date {
-    // conveniently enough, 2001-01-01 is a Monday:
-    return this.onDate(new Date(2001, 0, this.weekday));
+  /** The date in the current week that this class starts on. */
+  get startDate(): Temporal.PlainDateTime {
+    const today = Temporal.Now.plainDateISO();
+    return this.onDate(today.add({ days: this.weekday - today.dayOfWeek }));
   }
 
-  /** The date in the week of 2001-01-01 that this ends in. */
-  get endDate(): Date {
+  /** The date in this week that this ends on. */
+  get endDate(): Temporal.PlainDateTime {
     return this.add(1).startDate;
   }
 
@@ -286,17 +282,17 @@ export class Term {
   /** Semester as a character, e.g. "f" */
   public semester: TSemester;
   /** First day of classes, inclusive. */
-  public start: Date;
+  public start: Temporal.PlainDate;
   /** Last day of H1 classes, inclusive. */
-  public h1End?: Date;
+  public h1End?: Temporal.PlainDate;
   /** First day of H2 classes, inclusive. */
-  public h2Start?: Date;
+  public h2Start?: Temporal.PlainDate;
   /** Last day of classes, inclusive. */
-  public end: Date;
+  public end: Temporal.PlainDate;
   /** A Tuesday which runs on Monday schedule, if it exists. */
-  public mondaySchedule?: Date;
+  public mondaySchedule?: Temporal.PlainDate;
   /** A list of dates with no class. */
-  public holidays: Date[];
+  public holidays: Temporal.PlainDate[];
 
   constructor({
     urlName,
@@ -307,22 +303,21 @@ export class Term {
     mondayScheduleDate,
     holidayDates = [],
   }: Partial<TermInfo> & { urlName: string }) {
-    const midnight = (date: string) => new Date(`${date}T00:00:00`);
     const { year, semester } = parseUrlName(urlName);
     this.year = year;
     this.semester = semester;
-    this.start = startDate
-      ? midnight(startDate)
-      : new Date(Number(`20${year}`), 0, 1);
-    this.h1End = h1EndDate ? midnight(h1EndDate) : undefined;
-    this.h2Start = h2StartDate ? midnight(h2StartDate) : undefined;
+    this.start = Temporal.PlainDate.from(startDate ?? `20${year}-01-01`);
+    this.h1End = h1EndDate ? Temporal.PlainDate.from(h1EndDate) : undefined;
+    this.h2Start = h2StartDate
+      ? Temporal.PlainDate.from(h2StartDate)
+      : undefined;
     this.end = endDate
-      ? midnight(endDate)
-      : new Date(Number(`20${year}`), 11, 31);
+      ? Temporal.PlainDate.from(endDate)
+      : Temporal.PlainDate.from(`20${year}-12-31`);
     this.mondaySchedule = mondayScheduleDate
-      ? midnight(mondayScheduleDate)
+      ? Temporal.PlainDate.from(mondayScheduleDate)
       : undefined;
-    this.holidays = holidayDates.map((date) => midnight(date));
+    this.holidays = holidayDates.map((date) => Temporal.PlainDate.from(date));
   }
 
   /** e.g. "2022" */
@@ -360,10 +355,8 @@ export class Term {
     slot: Slot,
     secondHalf = false,
     startDay?: [number, number],
-  ): Date {
-    const date = new Date(
-      (secondHalf && this.h2Start ? this.h2Start : this.start).getTime(),
-    );
+  ): Temporal.PlainDateTime {
+    let date = secondHalf && this.h2Start ? this.h2Start : this.start;
 
     const startDayValid =
       // is defined
@@ -374,25 +367,35 @@ export class Term {
       startDay[1] >= 1 &&
       startDay[1] <= 31 &&
       // before end date
-      new Date(date.getFullYear(), startDay[0] - 1, startDay[1]).getTime() <
-        this.end.getTime();
+      Temporal.PlainDate.compare(
+        Temporal.PlainDate.from({
+          year: date.year,
+          month: startDay[0],
+          day: startDay[1],
+        }),
+        this.end,
+      ) < 0;
 
     if (startDayValid) {
-      date.setMonth(startDay[0] - 1);
-      date.setDate(startDay[1]);
+      date = date.with({
+        month: startDay[0],
+        day: startDay[1],
+      });
     }
 
-    while (date.getDay() !== slot.weekday) {
-      date.setDate(date.getDate() + 1);
+    while (date.dayOfWeek !== slot.weekday) {
+      date = date.add({ days: 1 });
     }
     return slot.onDate(date);
   }
 
   /** The date a slot ends on, plus an extra day. */
-  endDateFor(slot: Slot, firstHalf = false, endDay?: [number, number]): Date {
-    const date = new Date(
-      (firstHalf && this.h1End ? this.h1End : this.end).getTime(),
-    );
+  endDateFor(
+    slot: Slot,
+    firstHalf = false,
+    endDay?: [number, number],
+  ): Temporal.PlainDateTime {
+    let date = firstHalf && this.h1End ? this.h1End : this.end;
 
     const endDayValid =
       // is defined
@@ -403,25 +406,33 @@ export class Term {
       endDay[1] >= 1 &&
       endDay[1] <= 31 &&
       // after start date
-      new Date(date.getFullYear(), endDay[0] - 1, endDay[1]).getTime() >
-        this.start.getTime();
+      Temporal.PlainDate.compare(
+        Temporal.PlainDate.from({
+          year: date.year,
+          month: endDay[0],
+          day: endDay[1],
+        }),
+        this.start,
+      ) > 0;
 
     if (endDayValid) {
-      date.setMonth(endDay[0] - 1);
-      date.setDate(endDay[1]);
+      date = date.with({
+        month: endDay[0],
+        day: endDay[1],
+      });
     }
 
-    while (date.getDay() !== slot.weekday) {
-      date.setDate(date.getDate() - 1);
+    while (date.dayOfWeek !== slot.weekday) {
+      date = date.subtract({ days: 1 });
     }
     // plus an extra day, for inclusivity issues
-    date.setDate(date.getDate() + 1);
+    date = date.add({ days: 1 });
     return slot.onDate(date);
   }
 
   /** Dates that a given slot *doesn't* run on. */
-  exDatesFor(slot: Slot): Date[] {
-    const res = this.holidays.filter((date) => date.getDay() === slot.weekday);
+  exDatesFor(slot: Slot): Temporal.PlainDateTime[] {
+    const res = this.holidays.filter((date) => date.dayOfWeek === slot.weekday);
     const resDates = res.map((date) => slot.onDate(date));
 
     // remove the tuesday for monday schedule
@@ -433,7 +444,7 @@ export class Term {
   }
 
   /** An extra date a given slot would fall on, if it exists. */
-  rDateFor(slot: Slot): Date | undefined {
+  rDateFor(slot: Slot): Temporal.PlainDateTime | undefined {
     return slot.weekday === 1 && this.mondaySchedule
       ? slot.onDate(this.mondaySchedule)
       : undefined;
diff --git a/src/lib/gapi.ts b/src/lib/gapi.ts
index eaacc00b..6746978f 100644
--- a/src/lib/gapi.ts
+++ b/src/lib/gapi.ts
@@ -1,6 +1,6 @@
 import type { ICalEventData } from "ical-generator";
 import { ICalCalendar } from "ical-generator";
-import { RRule, RRuleSet } from "rrule";
+import { RRuleTemporal } from "rrule-temporal";
 import { tzlib_get_ical_block } from "timezones-ical-library";
 
 import type { Activity } from "./activity";
@@ -8,7 +8,7 @@ import type { Term } from "./dates";
 import type { State } from "./state";
 import { Class } from "./class";
 
-/** Timezone string. */
+/** MIT's Timezone string. */
 const TIMEZONE = "America/New_York";
 
 /** Downloads a file with the given text data */
@@ -28,6 +28,7 @@ function download(filename: string, text: string) {
   document.body.removeChild(element);
 }
 
+// TODO: add tests for this...
 function toICalEvents(activity: Activity, term: Term): ICalEventData[] {
   return activity.events.flatMap((event) =>
     event.slots.map((slot) => {
@@ -53,29 +54,21 @@ function toICalEvents(activity: Activity, term: Term): ICalEventData[] {
       const exDates = term.exDatesFor(slot.startSlot);
       const rDate = term.rDateFor(slot.startSlot);
 
-      const rrule = new RRule({
-        freq: RRule.WEEKLY,
-        until: endDate,
+      const rrule = new RRuleTemporal({
+        freq: "WEEKLY",
+        dtstart: startDate.toZonedDateTime(TIMEZONE),
+        until: endDate.toZonedDateTime(TIMEZONE),
+        exDate: exDates.map((date) => date.toZonedDateTime(TIMEZONE)),
+        rDate: rDate ? [rDate.toZonedDateTime(TIMEZONE)] : undefined,
       });
 
-      const rruleSet = new RRuleSet();
-      rruleSet.rrule(rrule);
-
-      for (const exdate of exDates) {
-        rruleSet.exdate(exdate);
-      }
-
-      if (rDate) {
-        rruleSet.rdate(rDate);
-      }
-
       return {
         summary: event.name,
         location: event.room,
         start: startDate,
         end: startDateEnd,
         timezone: TIMEZONE,
-        repeating: rruleSet,
+        repeating: rrule.toString(),
       } satisfies ICalEventData;
     }),
   );
diff --git a/src/lib/pe.ts b/src/lib/pe.ts
index ac3a66ff..ab1b3ca0 100644
--- a/src/lib/pe.ts
+++ b/src/lib/pe.ts
@@ -145,11 +145,11 @@ export class PEClass implements BaseActivity {
   }
 
   get startDate() {
-    return new Date(this.rawClass.startDate);
+    return Temporal.PlainDate.from(this.rawClass.startDate);
   }
 
   get endDate() {
-    return new Date(this.rawClass.endDate);
+    return Temporal.PlainDate.from(this.rawClass.endDate);
   }
 
   /** Fee, in dollars */
@@ -172,13 +172,11 @@ export class PEClass implements BaseActivity {
   }
 
   get start(): [number, number] {
-    const startDate = new Date(this.rawClass.startDate);
-    return [startDate.getMonth() + 1, startDate.getDate()];
+    return [this.startDate.month, this.startDate.day];
   }
 
   get end(): [number, number] {
-    const endDate = new Date(this.rawClass.endDate);
-    return [endDate.getMonth() + 1, endDate.getDate()];
+    return [this.endDate.month, this.endDate.day];
   }
 
   get flags(): PEFlags {
diff --git a/src/lib/schema.ts b/src/lib/schema.ts
index 4b3c212a..a50805e2 100644
--- a/src/lib/schema.ts
+++ b/src/lib/schema.ts
@@ -2,13 +2,17 @@ import type { Activity } from "./activity";
 import type { ColorScheme } from "./colors";
 import type { MeasurementSystem } from "./measurement";
 
+import "temporal-polyfill/global";
+
 export enum ClassType {
   ACADEMIC = "Academic",
   PEW = "PE & Wellness",
 }
 
 /** The date the content of the banner was last changed. */
-export const BANNER_LAST_CHANGED = new Date("2026-05-05T19:00:00Z").valueOf();
+export const BANNER_LAST_CHANGED = Temporal.Instant.from(
+  "2026-05-05T19:00:00Z",
+).epochMilliseconds;
 export const BANNER_MESSAGE =
   "Pre-registration for Fall 2026 is now open! PE&W classes will be available before Q1 2026 registration in September.";
 
diff --git a/src/lib/state.ts b/src/lib/state.ts
index f9e8e049..90a07343 100644
--- a/src/lib/state.ts
+++ b/src/lib/state.ts
@@ -413,7 +413,8 @@ export class State {
 
   set showBanner(show: boolean) {
     this.preferences.showBanner = show;
-    this.preferences.showBannerChanged = new Date().valueOf();
+    this.preferences.showBannerChanged =
+      Temporal.Now.instant().epochMilliseconds;
     this.updateState();
   }
 
diff --git a/src/root.tsx b/src/root.tsx
index 535fb2ef..0c12d5e1 100644
--- a/src/root.tsx
+++ b/src/root.tsx
@@ -16,6 +16,8 @@ import { Flex, Spinner, Text, Stack, Code } from "@chakra-ui/react";
 
 import "@fontsource-variable/inter/index.css";
 
+import "temporal-polyfill/global";
+
 // eslint-disable-next-line react-refresh/only-export-components
 export const links: Route.LinksFunction = () => [
   {
diff --git a/tests/activity.test.ts b/tests/activity.test.ts
index 3b844da0..3f988134 100644
--- a/tests/activity.test.ts
+++ b/tests/activity.test.ts
@@ -8,7 +8,19 @@ import {
   COLOR_SCHEME_DARK_CONTRAST,
 } from "../src/lib/colors";
 
+import "temporal-polyfill/global";
+
 describe("Timeslot", () => {
+  beforeEach(() => {
+    // Set fixed system time to ensure consistency
+    vi.setSystemTime("2001-01-01T12:00:00.000Z"); // January 1st, 2001 at noon
+  });
+
+  afterEach(() => {
+    // Restore the original system time after each test
+    vi.useRealTimers();
+  });
+
   test("Timeslot.fromStartEnd", () => {
     const myStart: Slot = new Slot(2);
     const myEnd: Slot = new Slot(120);
@@ -26,14 +38,30 @@ describe("Timeslot", () => {
   test("Timeslot.startTime", () => {
     const myTimeslot: Timeslot = new Timeslot(22, 43); // note: slot 22 is Monday at 5:00 PM
     expect(myTimeslot.startTime).toStrictEqual(
-      new Date(2001, 0, 1, 17, 0, 0, 0),
+      Temporal.PlainDateTime.from({
+        year: 2001,
+        month: 1,
+        day: 1,
+        hour: 17,
+        minute: 0,
+        second: 0,
+        millisecond: 0,
+      }),
     );
   });
 
   test("Timeslot.endTime", () => {
     const myTimeslot: Timeslot = new Timeslot(79, 52); // note: slot 79 + 52 = 131 is Thursday at 8:30 PM
     expect(myTimeslot.endTime).toStrictEqual(
-      new Date(2001, 0, 4, 20, 30, 0, 0),
+      Temporal.PlainDateTime.from({
+        year: 2001,
+        month: 1,
+        day: 4,
+        hour: 20,
+        minute: 30,
+        second: 0,
+        millisecond: 0,
+      }),
     );
   });
 
@@ -120,44 +148,89 @@ describe("Timeslot", () => {
   });
 });
 
-test("Event.eventInputs", () => {
-  const myCustomActivity: CustomActivity = new CustomActivity(
-    COLOR_SCHEME_LIGHT_CONTRAST,
-  );
-  const myHexCode = "#611917"; // randomly generated hex code
-  const myTitle = "y8g0i81"; // random keysmashes
-  const myRoom = "ahouttoanhontjanota";
-  myCustomActivity.backgroundColor = myHexCode;
-  const myEvent: Event = new Event(
-    myCustomActivity,
-    myTitle,
-    [new Timeslot(6, 7), new Timeslot(57, 10)],
-    myRoom,
-  );
-  expect(myEvent.eventInputs).toStrictEqual([
-    {
-      textColor: "#ffffff",
-      title: myTitle,
-      start: new Date(2001, 0, 1, 9, 0, 0, 0), // slot 6 = Monday at 9 AM
-      end: new Date(2001, 0, 1, 12, 30, 0, 0), // slot 13 = Monday at 12:30 PM
-      backgroundColor: myHexCode,
-      borderColor: myHexCode,
-      room: myRoom,
-      roomClarification: undefined,
-      activity: myCustomActivity,
-    },
-    {
-      textColor: "#ffffff",
-      title: myTitle,
-      start: new Date(2001, 0, 2, 17, 30, 0, 0), // slot 57 = Tuesday at 5:30 PM
-      end: new Date(2001, 0, 2, 22, 30, 0, 0), // slot 67 = Tuesday at 10:30 PM
-      backgroundColor: myHexCode,
-      borderColor: myHexCode,
-      room: myRoom,
-      roomClarification: undefined,
-      activity: myCustomActivity,
-    },
-  ]);
+describe("Event", () => {
+  beforeEach(() => {
+    // Set fixed system time to ensure consistency
+    vi.setSystemTime("2001-01-01T12:00:00.000Z"); // January 1st, 2001 at noon
+  });
+
+  afterEach(() => {
+    // Restore the original system time after each test
+    vi.useRealTimers();
+  });
+
+  describe("Event.eventInputs", () => {
+    test("returns correct event inputs", () => {
+      const myCustomActivity: CustomActivity = new CustomActivity(
+        COLOR_SCHEME_LIGHT_CONTRAST,
+      );
+      const myHexCode = "#611917"; // randomly generated hex code
+      const myTitle = "y8g0i81"; // random keysmashes
+      const myRoom = "ahouttoanhontjanota";
+      myCustomActivity.backgroundColor = myHexCode;
+      const myEvent: Event = new Event(
+        myCustomActivity,
+        myTitle,
+        [new Timeslot(6, 7), new Timeslot(57, 10)],
+        myRoom,
+      );
+
+      expect(myEvent.eventInputs).toStrictEqual([
+        {
+          contrastColor: "#ffffff",
+          title: myTitle,
+          start: Temporal.PlainDateTime.from({
+            year: 2001,
+            month: 1,
+            day: 1,
+            hour: 9,
+            minute: 0,
+            second: 0,
+            millisecond: 0,
+          }).toString(),
+          end: Temporal.PlainDateTime.from({
+            year: 2001,
+            month: 1,
+            day: 1,
+            hour: 12,
+            minute: 30,
+            second: 0,
+            millisecond: 0,
+          }).toString(),
+          color: myHexCode,
+          room: myRoom,
+          roomClarification: undefined,
+          activity: myCustomActivity,
+        },
+        {
+          contrastColor: "#ffffff",
+          title: myTitle,
+          start: Temporal.PlainDateTime.from({
+            year: 2001,
+            month: 1,
+            day: 2,
+            hour: 17,
+            minute: 30,
+            second: 0,
+            millisecond: 0,
+          }).toString(),
+          end: Temporal.PlainDateTime.from({
+            year: 2001,
+            month: 1,
+            day: 2,
+            hour: 22,
+            minute: 30,
+            second: 0,
+            millisecond: 0,
+          }).toString(),
+          color: myHexCode,
+          room: myRoom,
+          roomClarification: undefined,
+          activity: myCustomActivity,
+        },
+      ]);
+    });
+  });
 });
 
 describe("CustomActivity", () => {
diff --git a/tests/dates.test.ts b/tests/dates.test.ts
index 1d8c67d6..716b9955 100644
--- a/tests/dates.test.ts
+++ b/tests/dates.test.ts
@@ -9,6 +9,8 @@ import {
 } from "../src/lib/dates";
 import { JSDOM } from "jsdom";
 
+import "temporal-polyfill/global";
+
 test("parseUrlName", () => {
   expect(parseUrlName("f22")).toStrictEqual({
     year: "22",
@@ -94,12 +96,24 @@ describe("Term", () => {
       });
       expect(myTerm.year).toBe("42");
       expect(myTerm.semester).toBe("f");
-      expect(myTerm.start).toStrictEqual(new Date(2042, 3, 20, 0));
-      expect(myTerm.h1End).toStrictEqual(new Date(2042, 3, 21, 0));
-      expect(myTerm.h2Start).toStrictEqual(new Date(2042, 3, 22, 0));
-      expect(myTerm.mondaySchedule).toStrictEqual(new Date(2042, 3, 23, 0));
-      expect(myTerm.holidays).toStrictEqual([new Date(2042, 3, 24, 0)]);
-      expect(myTerm.end).toStrictEqual(new Date(2042, 3, 25, 0));
+      expect(myTerm.start).toStrictEqual(
+        Temporal.PlainDate.from({ year: 2042, month: 4, day: 20 }),
+      );
+      expect(myTerm.h1End).toStrictEqual(
+        Temporal.PlainDate.from({ year: 2042, month: 4, day: 21 }),
+      );
+      expect(myTerm.h2Start).toStrictEqual(
+        Temporal.PlainDate.from({ year: 2042, month: 4, day: 22 }),
+      );
+      expect(myTerm.mondaySchedule).toStrictEqual(
+        Temporal.PlainDate.from({ year: 2042, month: 4, day: 23 }),
+      );
+      expect(myTerm.holidays).toStrictEqual([
+        Temporal.PlainDate.from({ year: 2042, month: 4, day: 24 }),
+      ]);
+      expect(myTerm.end).toStrictEqual(
+        Temporal.PlainDate.from({ year: 2042, month: 4, day: 25 }),
+      );
     });
 
     test("no half", () => {
@@ -112,12 +126,20 @@ describe("Term", () => {
       });
       expect(myTerm.year).toBe("42");
       expect(myTerm.semester).toBe("f");
-      expect(myTerm.start).toStrictEqual(new Date(2042, 3, 20, 0));
+      expect(myTerm.start).toStrictEqual(
+        Temporal.PlainDate.from({ year: 2042, month: 4, day: 20 }),
+      );
       expect(myTerm.h1End).toBeUndefined();
       expect(myTerm.h2Start).toBeUndefined();
-      expect(myTerm.mondaySchedule).toStrictEqual(new Date(2042, 3, 23, 0));
-      expect(myTerm.holidays).toStrictEqual([new Date(2042, 3, 24, 0)]);
-      expect(myTerm.end).toStrictEqual(new Date(2042, 3, 25, 0));
+      expect(myTerm.mondaySchedule).toStrictEqual(
+        Temporal.PlainDate.from({ year: 2042, month: 4, day: 23 }),
+      );
+      expect(myTerm.holidays).toStrictEqual([
+        Temporal.PlainDate.from({ year: 2042, month: 4, day: 24 }),
+      ]);
+      expect(myTerm.end).toStrictEqual(
+        Temporal.PlainDate.from({ year: 2042, month: 4, day: 25 }),
+      );
     });
 
     test("no optional dates", () => {
@@ -126,12 +148,16 @@ describe("Term", () => {
       });
       expect(myTerm.year).toBe("42");
       expect(myTerm.semester).toBe("f");
-      expect(myTerm.start).toStrictEqual(new Date(2042, 0, 1, 0));
+      expect(myTerm.start).toStrictEqual(
+        Temporal.PlainDate.from({ year: 2042, month: 1, day: 1 }),
+      );
       expect(myTerm.h1End).toBeUndefined();
       expect(myTerm.h2Start).toBeUndefined();
       expect(myTerm.mondaySchedule).toBeUndefined();
       expect(myTerm.holidays).toStrictEqual([]);
-      expect(myTerm.end).toStrictEqual(new Date(2042, 11, 31, 0));
+      expect(myTerm.end).toStrictEqual(
+        Temporal.PlainDate.from({ year: 2042, month: 12, day: 31 }),
+      );
     });
   });
 
@@ -187,7 +213,15 @@ describe("Term", () => {
           false,
           undefined,
         ),
-      ).toStrictEqual(new Date(2044, 9, 19, 6, 30));
+      ).toStrictEqual(
+        Temporal.PlainDateTime.from({
+          year: 2044,
+          month: 10,
+          day: 19,
+          hour: 6,
+          minute: 30,
+        }),
+      );
     });
 
     test("secondHalf false, startDay undefined, slot.weekday doesn't match", () => {
@@ -198,7 +232,13 @@ describe("Term", () => {
           undefined,
         ),
       ).toStrictEqual(
-        new Date(2044, 9, 25, 19, 30), // bump to next Tuesday, October 25, 2044
+        Temporal.PlainDateTime.from({
+          year: 2044,
+          month: 10,
+          day: 25,
+          hour: 19,
+          minute: 30,
+        }),
       );
     });
 
@@ -209,7 +249,15 @@ describe("Term", () => {
           false,
           [11, 4], // this would mean Friday, November 4, 2044
         ),
-      ).toStrictEqual(new Date(2044, 10, 4, 22));
+      ).toStrictEqual(
+        Temporal.PlainDateTime.from({
+          year: 2044,
+          month: 11,
+          day: 4,
+          hour: 22,
+          minute: 0,
+        }),
+      );
     });
 
     test("secondHalf false, startDay defined, slot.weekday doesn't match", () => {
@@ -220,7 +268,13 @@ describe("Term", () => {
           [11, 4],
         ),
       ).toStrictEqual(
-        new Date(2044, 10, 7, 20), // bumps to next Monday, November 7, 2044
+        Temporal.PlainDateTime.from({
+          year: 2044,
+          month: 11,
+          day: 7,
+          hour: 20,
+          minute: 0,
+        }),
       );
     });
 
@@ -231,7 +285,15 @@ describe("Term", () => {
           true,
           undefined,
         ),
-      ).toStrictEqual(new Date(2044, 10, 21, 6, 30));
+      ).toStrictEqual(
+        Temporal.PlainDateTime.from({
+          year: 2044,
+          month: 11,
+          day: 21,
+          hour: 6,
+          minute: 30,
+        }),
+      );
     });
 
     test("secondHalf true, startDay undefined, slot.weekday doesn't match", () => {
@@ -242,7 +304,13 @@ describe("Term", () => {
           undefined,
         ),
       ).toStrictEqual(
-        new Date(2044, 10, 22, 6, 30), // bump to next day
+        Temporal.PlainDateTime.from({
+          year: 2044,
+          month: 11,
+          day: 22,
+          hour: 6,
+          minute: 30,
+        }), // bump to next day
       );
     });
 
@@ -253,7 +321,15 @@ describe("Term", () => {
           true,
           [11, 14], // Monday, November 14, 2044
         ),
-      ).toStrictEqual(new Date(2044, 10, 14, 6, 30));
+      ).toStrictEqual(
+        Temporal.PlainDateTime.from({
+          year: 2044,
+          month: 11,
+          day: 14,
+          hour: 6,
+          minute: 30,
+        }),
+      );
     });
 
     test("secondHalf true, startDay defined, slot.weekday doesn't match", () => {
@@ -264,7 +340,13 @@ describe("Term", () => {
           [11, 14],
         ),
       ).toStrictEqual(
-        new Date(2044, 10, 15, 6, 30), // bump to next day
+        Temporal.PlainDateTime.from({
+          year: 2044,
+          month: 11,
+          day: 15,
+          hour: 6,
+          minute: 30,
+        }), // bump to next day
       );
     });
   });
@@ -285,52 +367,114 @@ describe("Term", () => {
     test("firstHalf false, endDay undefined, slot.weekday matches", () => {
       expect(
         myTerm.endDateFor(new Slot(1), false, undefined), // NOTE: slot 1 = Monday at 6:30 AM
-      ).toStrictEqual(new Date(2044, 10, 22, 6, 30, 0, 0));
+      ).toStrictEqual(
+        Temporal.PlainDateTime.from({
+          year: 2044,
+          month: 11,
+          day: 22,
+          hour: 6,
+          minute: 30,
+        }),
+      );
     });
 
     test("firstHalf false, endDay undefined, slot.weekday doesn't match", () => {
       expect(
         myTerm.endDateFor(new Slot(68), false, undefined), // NOTE: slot 68 = Wednesday at 6:00 AM
       ).toStrictEqual(
-        new Date(2044, 10, 17, 6, 0, 0, 0), // NOTE: 2044-11-17 is a Thursday
+        Temporal.PlainDateTime.from({
+          year: 2044,
+          month: 11,
+          day: 17,
+          hour: 6,
+          minute: 0,
+        }),
       );
     });
 
     test("firstHalf true, endDay undefined, slot.weekday matches", () => {
       expect(
         myTerm.endDateFor(new Slot(94), true, undefined), // NOTE: slot 94 = Wednesday at 7:00 PM
-      ).toStrictEqual(new Date(2044, 9, 20, 19, 0, 0, 0));
+      ).toStrictEqual(
+        Temporal.PlainDateTime.from({
+          year: 2044,
+          month: 10,
+          day: 20,
+          hour: 19,
+          minute: 0,
+        }),
+      );
     });
 
     test("firstHalf true, endDay undefined, slot.weekday doesn't match", () => {
       expect(
         myTerm.endDateFor(new Slot(4), true, undefined), // NOTE: slot 4 = Monday at 8:00 PM
       ).toStrictEqual(
-        new Date(2044, 9, 18, 8, 0, 0, 0), // NOTE: 2044-10-18 is a Tuesday
+        Temporal.PlainDateTime.from({
+          year: 2044,
+          month: 10,
+          day: 18,
+          hour: 8,
+          minute: 0,
+        }), // NOTE: 2044-10-18 is a Tuesday
       );
     });
 
     test("firstHalf false, endDay defined, slot.weekday matches", () => {
       expect(
         myTerm.endDateFor(new Slot(0), false, [9, 5]), // NOTE: 2044-09-05 is a Monday
-      ).toStrictEqual(new Date(2044, 8, 6, 6, 0, 0, 0));
+      ).toStrictEqual(
+        Temporal.PlainDateTime.from({
+          year: 2044,
+          month: 9,
+          day: 6,
+          hour: 6,
+          minute: 0,
+        }),
+      );
     });
 
     test("firstHalf true, endDay defined, slot.weekday matches", () => {
       expect(myTerm.endDateFor(new Slot(0), true, [9, 5])).toStrictEqual(
-        new Date(2044, 8, 6, 6, 0, 0, 0),
+        Temporal.PlainDateTime.from({
+          year: 2044,
+          month: 9,
+          day: 6,
+          hour: 6,
+          minute: 0,
+          second: 0,
+          millisecond: 0,
+        }),
       );
     });
 
     test("firstHalf false, endDay defined, slot.weekday doesn't match", () => {
       expect(
         myTerm.endDateFor(new Slot(69), false, [9, 5]), // NOTE: slot 69 = Wednesday at 6:30 AM
-      ).toStrictEqual(new Date(2044, 8, 1, 6, 30, 0, 0));
+      ).toStrictEqual(
+        Temporal.PlainDateTime.from({
+          year: 2044,
+          month: 9,
+          day: 1,
+          hour: 6,
+          minute: 30,
+          second: 0,
+          millisecond: 0,
+        }),
+      );
     });
 
     test("firstHalf true, endDay defined, slot.weekday doesn't match", () => {
       expect(myTerm.endDateFor(new Slot(69), true, [9, 5])).toStrictEqual(
-        new Date(2044, 8, 1, 6, 30, 0, 0),
+        Temporal.PlainDateTime.from({
+          year: 2044,
+          month: 9,
+          day: 1,
+          hour: 6,
+          minute: 30,
+          second: 0,
+          millisecond: 0,
+        }),
       );
     });
   });
@@ -350,8 +494,20 @@ describe("Term", () => {
       expect(
         myTerm.exDatesFor(new Slot(40)), // NOTE: slot 40 = Tuesday at 9:00 AM
       ).toStrictEqual([
-        new Date(2079, 7, 8, 9, 0, 0, 0),
-        new Date(2079, 7, 11, 9, 0, 0, 0),
+        Temporal.PlainDateTime.from({
+          year: 2079,
+          month: 8,
+          day: 8,
+          hour: 9,
+          minute: 0,
+        }),
+        Temporal.PlainDateTime.from({
+          year: 2079,
+          month: 8,
+          day: 11,
+          hour: 9,
+          minute: 0,
+        }),
       ]);
     });
 
@@ -363,7 +519,15 @@ describe("Term", () => {
       });
       expect(
         myTerm.exDatesFor(new Slot(100)), // NOTE: slot 100 = Wednesday at 10:00 PM
-      ).toStrictEqual([new Date(2079, 7, 9, 22, 0, 0, 0)]);
+      ).toStrictEqual([
+        Temporal.PlainDateTime.from({
+          year: 2079,
+          month: 8,
+          day: 9,
+          hour: 22,
+          minute: 0,
+        }),
+      ]);
     });
 
     test("has non-matching holiday, tuesday on monday schedule", () => {
@@ -374,7 +538,15 @@ describe("Term", () => {
       });
       expect(
         myTerm.exDatesFor(new Slot(41)), // NOTE: slot 41 = Tuesday at 9:30 AM
-      ).toStrictEqual([new Date(2079, 7, 11, 9, 30, 0, 0)]);
+      ).toStrictEqual([
+        Temporal.PlainDateTime.from({
+          year: 2079,
+          month: 8,
+          day: 11,
+          hour: 9,
+          minute: 30,
+        }),
+      ]);
     });
 
     test("has non-matching holiday, not monday schedule", () => {
@@ -395,9 +567,15 @@ describe("Term", () => {
       });
       expect(
         myTerm.exDatesFor(new Slot(34)), // NOTE: slot 34 = Tuesday at 6:00 AM
-      ).toStrictEqual(
-        [new Date(2079, 0, 1, 6, 0, 0, 0)], // NOTE: in some timezones this shifts to 2000-01-01 so we hardcode "America/New_York" for reproducibility
-      );
+      ).toStrictEqual([
+        Temporal.PlainDateTime.from({
+          year: 2079,
+          month: 1,
+          day: 1,
+          hour: 6,
+          minute: 0,
+        }),
+      ]);
     });
 
     test("no holidays, not monday schedule", () => {
@@ -421,7 +599,13 @@ describe("Term", () => {
         mondayScheduleDate: "2056-04-24",
       });
       expect(myTerm.rDateFor(new Slot(0))).toStrictEqual(
-        new Date(2056, 3, 24, 6, 0, 0, 0),
+        Temporal.PlainDateTime.from({
+          year: 2056,
+          month: 4,
+          day: 24,
+          hour: 6,
+          minute: 0,
+        }),
       );
     });
 
@@ -449,13 +633,32 @@ describe("Slot", () => {
   /**
    * Test each method separately (most of them don't need to be partitioned)
    */
+
+  beforeEach(() => {
+    // Set fixed system time to ensure consistency
+    vi.setSystemTime("2001-01-01T12:00:00.000Z"); // January 1st, 2001 at noon
+  });
+
+  afterEach(() => {
+    // Restore the original system time after each test
+    vi.useRealTimers();
+  });
+
   test("Slot.fromSlotNumber", () => {
     const mySlot: Slot = Slot.fromSlotNumber(42);
     expect(mySlot.slot).toBe(42);
   });
 
   test("Slot.fromStartDate", () => {
-    const myDate: Date = new Date(2001, 6, 19, 22, 1, 52, 23); // randomly chosen date
+    const myDate = Temporal.PlainDateTime.from({
+      year: 2001,
+      month: 7,
+      day: 19,
+      hour: 22,
+      minute: 1,
+      second: 52,
+      millisecond: 23,
+    }); // randomly chosen date
     const mySlot: Slot = Slot.fromStartDate(myDate);
     expect(mySlot.slot).toBe(134); // note: this was a Thursday (July 19, 2001), slot number 32
   });
@@ -473,18 +676,46 @@ describe("Slot", () => {
 
   test("Slot.onDate", () => {
     const mySlot: Slot = new Slot(125); // Thursday, 5:30 PM
-    const myDate: Date = new Date(2068, 8, 6); // this is also a Thursday
-    expect(mySlot.onDate(myDate)).toStrictEqual(new Date(2068, 8, 6, 17, 30));
+    const myDate = Temporal.PlainDate.from({
+      year: 2068,
+      month: 9,
+      day: 6,
+    }); // this is also a Thursday
+    expect(mySlot.onDate(myDate)).toStrictEqual(
+      Temporal.PlainDateTime.from({
+        year: 2068,
+        month: 9,
+        day: 6,
+        hour: 17,
+        minute: 30,
+      }),
+    );
   });
 
   test("Slot.startDate", () => {
     const mySlot: Slot = new Slot(62); // Tuesday, 8:00 PM
-    expect(mySlot.startDate).toStrictEqual(new Date(2001, 0, 2, 20, 0));
+    expect(mySlot.startDate).toStrictEqual(
+      Temporal.PlainDateTime.from({
+        year: 2001,
+        month: 1,
+        day: 2,
+        hour: 20,
+        minute: 0,
+      }),
+    );
   });
 
   test("Slot.endDate", () => {
     const mySlot: Slot = new Slot(130); // Thursday, 8:00 PM
-    expect(mySlot.endDate).toStrictEqual(new Date(2001, 0, 4, 20, 30));
+    expect(mySlot.endDate).toStrictEqual(
+      Temporal.PlainDateTime.from({
+        year: 2001,
+        month: 1,
+        day: 4,
+        hour: 20,
+        minute: 30,
+      }),
+    );
   });
 
   test("Slot.weekday", () => {
diff --git a/tsconfig.json b/tsconfig.json
index f2770730..7b0d00c5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,14 @@
     ".react-router/types/**/*"
   ],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ES2022",
+      "esnext.temporal",
+      "esnext.intl",
+      "esnext.date"
+    ],
     "types": ["node", "vite/client", "vitest/globals", "vitest/jsdom"],
     "target": "ES2022",
     "module": "ES2022",