feat: support outlook for calendar plus minor fixes

src/plugins/built-in/timetable/CalendarDeleteEventsModal.svelte

@@ -4,11 +4,13 @@
   let {
     open = false,
     busy = false,
+    providerLabel = "Google",
     onConfirm,
     onCancel,
   } = $props<{
     open?: boolean;
     busy?: boolean;
+    providerLabel?: string;
     onConfirm: () => void | Promise<void>;
     onCancel: () => void;
   }>();
@@ -37,7 +39,7 @@
         Remove synced events?
       </h2>
       <p class="bsplus-cal-modal-body">
-        This removes all BetterSEQTA+ timetable events from your Google Calendar for this school.
+        This removes all BetterSEQTA+ timetable events from your {providerLabel} Calendar for this school.
         Your connection stays active — you can sync again later.
       </p>
       <div class="bsplus-cal-modal-actions">

src/plugins/built-in/timetable/CalendarDisconnectModal.svelte

@@ -4,11 +4,13 @@
   let {
     open = false,
     busy = false,
+    providerLabel = "Google",
     onConfirm,
     onCancel,
   } = $props<{
     open?: boolean;
     busy?: boolean;
+    providerLabel?: string;
     onConfirm: () => void | Promise<void>;
     onCancel: () => void;
   }>();
@@ -34,10 +36,10 @@
       transition:fade={{ duration: 180 }}
     >
       <h2 id="bsplus-cal-disconnect-title" class="bsplus-cal-modal-title">
-        Disconnect Google Calendar?
+        Disconnect {providerLabel} Calendar?
       </h2>
       <p class="bsplus-cal-modal-body">
-        Your synced timetable events will stay in Google Calendar, but BetterSEQTA+ will stop
+        Your synced timetable events will stay in {providerLabel} Calendar, but BetterSEQTA+ will stop
         updating them until you connect again.
       </p>
       <div class="bsplus-cal-modal-actions">

src/plugins/built-in/timetable/CalendarSyncControl.svelte

@@ -8,6 +8,10 @@
   } from "@/config/googleCalendar";
   import { maybeRunDueWeeklySync } from "@/seqta/utils/googleCalendar/calendarSyncListener";
   import { deleteSyncedEventsFromGoogleCalendar } from "@/seqta/utils/googleCalendar/syncEngine";
+  import {
+    formatOutlookSyncResultMessage,
+    runOutlookCalendarSync,
+  } from "@/seqta/utils/outlookCalendar/syncRunner";
   import {
     formatSyncResultMessage,
     runGoogleCalendarSync,
@@ -17,17 +21,24 @@
     GoogleCalendarSyncProgress,
     GoogleCalendarSyncResult,
   } from "@/seqta/utils/googleCalendar/types";
+  import type { OutlookCalendarStatus } from "@/seqta/utils/outlookCalendar/types";
+  import { deleteSyncedEventsFromOutlookCalendar } from "@/seqta/utils/outlookCalendar/syncEngine";
   import CalendarDeleteEventsModal from "./CalendarDeleteEventsModal.svelte";
   import CalendarDisconnectModal from "./CalendarDisconnectModal.svelte";
   import CalendarSyncProgress from "./CalendarSyncProgress.svelte";
+  import OutlookCalendarIcon from "./OutlookCalendarIcon.svelte";
   import { settingsState } from "@/seqta/utils/listeners/SettingsState";
   import { syncCalendarSyncTheme } from "./calendarSyncTheme";
 
+  type CalendarProvider = "google" | "outlook";
   type BusyPhase = "connect" | "sync" | "delete" | "disconnect" | null;
+  type BusyState = { provider: CalendarProvider; phase: BusyPhase } | null;
 
-  let status = $state<GoogleCalendarStatus>({ configured: true, connected: false });
-  let busy = $state<BusyPhase>(null);
+  let googleStatus = $state<GoogleCalendarStatus>({ configured: true, connected: false });
+  let outlookStatus = $state<OutlookCalendarStatus>({ configured: true, connected: false });
+  let busy = $state<BusyState>(null);
   let menuOpen = $state(false);
+  let modalProvider = $state<CalendarProvider | null>(null);
   let showDisconnect = $state(false);
   let showDeleteEvents = $state(false);
   let toast = $state<{ message: string; error: boolean } | null>(null);
@@ -42,8 +53,17 @@
   let toastTimer: ReturnType<typeof setTimeout> | null = null;
 
   const isBusy = $derived(busy !== null);
+  const anyConnected = $derived(googleStatus.connected || outlookStatus.connected);
   const accent = "var(--bsplus-cal-accent, var(--better-main, #3b82f6))";
 
+  function isProviderBusy(provider: CalendarProvider): boolean {
+    return busy?.provider === provider;
+  }
+
+  function providerPhase(provider: CalendarProvider): BusyPhase {
+    return busy?.provider === provider ? busy.phase : null;
+  }
+
   function showToastMessage(message: string, isError = false) {
     toast = { message, error: isError };
     if (toastTimer) clearTimeout(toastTimer);
@@ -53,19 +73,26 @@
   }
 
   async function refreshStatus() {
-    status = (await browser.runtime.sendMessage({
-      type: "googleCalendarStatus",
-    })) as GoogleCalendarStatus;
-    syncWeeksAhead = status.syncWeeksAhead ?? 12;
-    autoSyncWeekly = status.autoSyncWeekly !== false;
+    const [google, outlook] = await Promise.all([
+      browser.runtime.sendMessage({ type: "googleCalendarStatus" }) as Promise<GoogleCalendarStatus>,
+      browser.runtime.sendMessage({ type: "outlookCalendarStatus" }) as Promise<OutlookCalendarStatus>,
+    ]);
+    googleStatus = google;
+    outlookStatus = outlook;
+    syncWeeksAhead = google.syncWeeksAhead ?? 12;
+    autoSyncWeekly = google.autoSyncWeekly !== false;
   }
 
-  async function getAccessTokenFromBackground(): Promise<string> {
-    const res = (await browser.runtime.sendMessage({
-      type: "googleCalendarGetAccessToken",
-    })) as { success?: boolean; accessToken?: string; error?: string };
+  async function getAccessToken(provider: CalendarProvider): Promise<string> {
+    const messageType =
+      provider === "google" ? "googleCalendarGetAccessToken" : "outlookCalendarGetAccessToken";
+    const res = (await browser.runtime.sendMessage({ type: messageType })) as {
+      success?: boolean;
+      accessToken?: string;
+      error?: string;
+    };
     if (!res?.success || !res.accessToken) {
-      throw new Error(res?.error ?? "Could not get Google Calendar access token.");
+      throw new Error(res?.error ?? "Could not get calendar access token.");
     }
     return res.accessToken;
   }
@@ -84,15 +111,17 @@
     })) as GoogleCalendarStatus & { success?: boolean };
     if (result.syncWeeksAhead != null) syncWeeksAhead = result.syncWeeksAhead;
     if (result.autoSyncWeekly != null) autoSyncWeekly = result.autoSyncWeekly;
-    status = { ...status, ...result };
+    googleStatus = { ...googleStatus, ...result };
   }
 
-  async function performSync(mode: "full" | "incremental" = "full"): Promise<boolean> {
-    const result = await runGoogleCalendarSync({
-      mode,
-      onProgress: handleSyncProgress,
-    });
+  async function performSync(
+    provider: CalendarProvider,
+    mode: "full" | "incremental" = "full",
+  ): Promise<boolean> {
+    const run = provider === "google" ? runGoogleCalendarSync : runOutlookCalendarSync;
+    const format = provider === "google" ? formatSyncResultMessage : formatOutlookSyncResultMessage;
 
+    const result = await run({ mode, onProgress: handleSyncProgress });
     syncProgress = null;
 
     if (!result.success) {
@@ -100,30 +129,47 @@
       return false;
     }
 
-    status = {
-      ...status,
-      connected: true,
-      lastSyncAt: result.lastSyncAt ?? status.lastSyncAt,
-    };
-    showToastMessage(formatSyncResultMessage(result));
+    if (provider === "google") {
+      googleStatus = {
+        ...googleStatus,
+        connected: true,
+        lastSyncAt: result.lastSyncAt ?? googleStatus.lastSyncAt,
+      };
+    } else {
+      outlookStatus = {
+        ...outlookStatus,
+        connected: true,
+        lastSyncAt: result.lastSyncAt ?? outlookStatus.lastSyncAt,
+      };
+    }
+
+    showToastMessage(format(result));
     return true;
   }
 
-  async function connectGoogle() {
+  async function connectProvider(provider: CalendarProvider) {
+    const status = provider === "google" ? googleStatus : outlookStatus;
     if (!status.configured || isBusy) return;
     menuOpen = true;
-    busy = "connect";
+    busy = { provider, phase: "connect" };
+    const connectType =
+      provider === "google" ? "googleCalendarConnect" : "outlookCalendarConnect";
     try {
       const result = (await browser.runtime.sendMessage({
-        type: "googleCalendarConnect",
+        type: connectType,
       })) as GoogleCalendarSyncResult;
       if (!result.success) {
-        showToastMessage(result.error ?? "Could not connect to Google Calendar.", true);
+        const label = provider === "google" ? "Google" : "Outlook";
+        showToastMessage(result.error ?? `Could not connect to ${label} Calendar.`, true);
         return;
       }
-      status = { ...status, connected: true };
-      busy = "sync";
-      await performSync();
+      if (provider === "google") {
+        googleStatus = { ...googleStatus, connected: true };
+      } else {
+        outlookStatus = { ...outlookStatus, connected: true };
+      }
+      busy = { provider, phase: "sync" };
+      await performSync(provider);
     } catch (err) {
       showToastMessage(err instanceof Error ? err.message : "Could not connect.", true);
     } finally {
@@ -132,16 +178,17 @@
     }
   }
 
-  async function syncTimetable() {
+  async function syncProvider(provider: CalendarProvider) {
+    const status = provider === "google" ? googleStatus : outlookStatus;
     if (!status.configured || isBusy) return;
     if (!status.connected) {
-      await connectGoogle();
+      await connectProvider(provider);
       return;
     }
 
-    busy = "sync";
+    busy = { provider, phase: "sync" };
     try {
-      await performSync();
+      await performSync(provider);
     } catch (err) {
       showToastMessage(err instanceof Error ? err.message : "Calendar sync failed.", true);
     } finally {
@@ -151,8 +198,9 @@
   }
 
   async function confirmDeleteEvents() {
-    if (isBusy) return;
-    busy = "delete";
+    if (isBusy || !modalProvider) return;
+    const provider = modalProvider;
+    busy = { provider, phase: "delete" };
     syncProgress = {
       phase: "preparing",
       current: 0,
@@ -160,11 +208,13 @@
       message: "Preparing removal…",
     };
     try {
-      const result = await deleteSyncedEventsFromGoogleCalendar(
-        location.origin,
-        getAccessTokenFromBackground,
-        { onProgress: handleSyncProgress },
-      );
+      const deleteFn =
+        provider === "google"
+          ? deleteSyncedEventsFromGoogleCalendar
+          : deleteSyncedEventsFromOutlookCalendar;
+      const result = await deleteFn(location.origin, () => getAccessToken(provider), {
+        onProgress: handleSyncProgress,
+      });
 
       if (!result.success) {
         showToastMessage(result.error ?? "Could not remove calendar events.", true);
@@ -174,6 +224,7 @@
       const removed = result.deleted ?? 0;
       showDeleteEvents = false;
       menuOpen = false;
+      modalProvider = null;
       if (removed === 0) {
         showToastMessage("No synced events to remove.");
       } else {
@@ -200,20 +251,29 @@
   }
 
   async function confirmDisconnect() {
-    if (isBusy) return;
-    busy = "disconnect";
+    if (isBusy || !modalProvider) return;
+    const provider = modalProvider;
+    busy = { provider, phase: "disconnect" };
+    const disconnectType =
+      provider === "google" ? "googleCalendarDisconnect" : "outlookCalendarDisconnect";
+    const label = provider === "google" ? "Google" : "Outlook";
     try {
       const result = (await browser.runtime.sendMessage({
-        type: "googleCalendarDisconnect",
+        type: disconnectType,
       })) as { success?: boolean };
       if (!result?.success) {
-        showToastMessage("Could not disconnect Google Calendar.", true);
+        showToastMessage(`Could not disconnect ${label} Calendar.`, true);
         return;
       }
-      status = { ...status, connected: false, lastSyncAt: undefined };
+      if (provider === "google") {
+        googleStatus = { ...googleStatus, connected: false, lastSyncAt: undefined };
+      } else {
+        outlookStatus = { ...outlookStatus, connected: false, lastSyncAt: undefined };
+      }
       showDisconnect = false;
       menuOpen = false;
-      showToastMessage("Disconnected from Google Calendar.");
+      modalProvider = null;
+      showToastMessage(`Disconnected from ${label} Calendar.`);
     } catch (err) {
       showToastMessage(err instanceof Error ? err.message : "Disconnect failed.", true);
     } finally {
@@ -294,6 +354,7 @@
 
     const themeKeys = [
       "selectedColor",
+      "selectedFont",
       "DarkMode",
       "adaptiveThemeColour",
       "adaptiveThemeGradient",
@@ -333,22 +394,22 @@
 <div class="bsplus-cal-sync" bind:this={rootEl}>
   <button
     type="button"
-    class="uiButton bsplus-cal-trigger iconFamily"
+    class="uiButton bsplus-cal-trigger"
     bind:this={triggerEl}
     class:bsplus-cal-trigger--open={menuOpen}
-    class:bsplus-cal-trigger--connected={status.connected}
+    class:bsplus-cal-trigger--connected={anyConnected}
     class:bsplus-cal-trigger--busy={isBusy}
     aria-haspopup="menu"
     aria-expanded={menuOpen}
     aria-busy={isBusy}
-    aria-label={status.connected ? "Google Calendar sync options" : "Sync with Calendar"}
+    aria-label={anyConnected ? "Calendar sync options" : "Sync with Calendar"}
     onclick={() => {
       if (!isBusy) toggleMenu();
     }}
   >
-    <span class="bsplus-cal-trigger-icon" aria-hidden="true">&#xe9cd;</span>
+    <span class="bsplus-cal-trigger-icon iconFamily" aria-hidden="true">&#xe9cd;</span>
     <span class="bsplus-cal-trigger-text">Sync with Calendar</span>
-    {#if status.connected}
+    {#if anyConnected}
       <span class="bsplus-cal-status-dot" aria-hidden="true"></span>
     {/if}
   </button>
@@ -397,10 +458,10 @@
               <span> Calendar</span>
             </span>
             <span class="bsplus-cal-provider-status">
-              {#if !status.configured}
+              {#if !googleStatus.configured}
                 Not available in this build
-              {:else if status.connected}
-                Connected{formatLastSync(status.lastSyncAt) ? ` · ${formatLastSync(status.lastSyncAt)}` : ""}
+              {:else if googleStatus.connected}
+                Connected{formatLastSync(googleStatus.lastSyncAt) ? ` · ${formatLastSync(googleStatus.lastSyncAt)}` : ""}
               {:else}
                 Not connected
               {/if}
@@ -408,8 +469,129 @@
           </div>
         </div>
 
-        {#if status.connected}
-          <div class="bsplus-cal-settings" role="group" aria-label="Sync settings">
+        <div class="bsplus-cal-provider-actions">
+          {#if !googleStatus.connected}
+            <button
+              type="button"
+              class="bsplus-cal-action bsplus-cal-action--primary"
+              style:--bsplus-cal-accent={accent}
+              role="menuitem"
+              disabled={!googleStatus.configured || isBusy}
+              onclick={() => void connectProvider("google")}
+            >
+              {providerPhase("google") === "connect" ? "Connecting…" : "Connect"}
+            </button>
+          {:else}
+            <button
+              type="button"
+              class="bsplus-cal-action bsplus-cal-action--primary"
+              style:--bsplus-cal-accent={accent}
+              role="menuitem"
+              disabled={isBusy}
+              onclick={() => void syncProvider("google")}
+            >
+              {providerPhase("google") === "sync" ? "Syncing…" : "Sync now"}
+            </button>
+            <button
+              type="button"
+              class="bsplus-cal-action bsplus-cal-action--ghost"
+              role="menuitem"
+              disabled={isBusy}
+              onclick={() => {
+                modalProvider = "google";
+                showDeleteEvents = true;
+              }}
+            >
+              {providerPhase("google") === "delete" ? "Removing…" : "Remove from calendar"}
+            </button>
+            <button
+              type="button"
+              class="bsplus-cal-action bsplus-cal-action--ghost"
+              role="menuitem"
+              disabled={isBusy}
+              onclick={() => {
+                modalProvider = "google";
+                showDisconnect = true;
+              }}
+            >
+              Disconnect
+            </button>
+          {/if}
+        </div>
+      </div>
+
+      <div class="bsplus-cal-provider bsplus-cal-provider--outlook" role="none">
+        <div class="bsplus-cal-provider-row">
+          <span class="bsplus-cal-provider-icon" aria-hidden="true">
+            <OutlookCalendarIcon />
+          </span>
+          <div class="bsplus-cal-provider-copy">
+            <span class="bsplus-cal-provider-name">Outlook Calendar</span>
+            <span class="bsplus-cal-provider-status">
+              {#if !outlookStatus.configured}
+                Set OUTLOOK_OAUTH_CLIENT_ID to enable
+              {:else if outlookStatus.connected}
+                Connected{formatLastSync(outlookStatus.lastSyncAt) ? ` · ${formatLastSync(outlookStatus.lastSyncAt)}` : ""}
+              {:else}
+                Not connected
+              {/if}
+            </span>
+          </div>
+        </div>
+
+        <div class="bsplus-cal-provider-actions">
+          {#if !outlookStatus.connected}
+            <button
+              type="button"
+              class="bsplus-cal-action bsplus-cal-action--primary"
+              style:--bsplus-cal-accent={accent}
+              role="menuitem"
+              disabled={!outlookStatus.configured || isBusy}
+              onclick={() => void connectProvider("outlook")}
+            >
+              {providerPhase("outlook") === "connect" ? "Connecting…" : "Connect"}
+            </button>
+          {:else}
+            <button
+              type="button"
+              class="bsplus-cal-action bsplus-cal-action--primary"
+              style:--bsplus-cal-accent={accent}
+              role="menuitem"
+              disabled={isBusy}
+              onclick={() => void syncProvider("outlook")}
+            >
+              {providerPhase("outlook") === "sync" ? "Syncing…" : "Sync now"}
+            </button>
+            <button
+              type="button"
+              class="bsplus-cal-action bsplus-cal-action--ghost"
+              role="menuitem"
+              disabled={isBusy}
+              onclick={() => {
+                modalProvider = "outlook";
+                showDeleteEvents = true;
+              }}
+            >
+              {providerPhase("outlook") === "delete" ? "Removing…" : "Remove from calendar"}
+            </button>
+            <button
+              type="button"
+              class="bsplus-cal-action bsplus-cal-action--ghost"
+              role="menuitem"
+              disabled={isBusy}
+              onclick={() => {
+                modalProvider = "outlook";
+                showDisconnect = true;
+              }}
+            >
+              Disconnect
+            </button>
+          {/if}
+        </div>
+      </div>
+
+      {#if anyConnected}
+        <div class="bsplus-cal-settings" role="group" aria-label="Sync settings">
             <label class="bsplus-cal-setting">
               <span class="bsplus-cal-setting-label">Weeks ahead</span>
               <input
@@ -440,76 +622,29 @@
 
         <CalendarSyncProgress progress={syncProgress} />
 
-        <div class="bsplus-cal-provider-actions">
-          {#if !status.connected}
-            <button
-              type="button"
-              class="bsplus-cal-action bsplus-cal-action--primary"
-              style:--bsplus-cal-accent={accent}
-              role="menuitem"
-              disabled={!status.configured || isBusy}
-              onclick={() => void connectGoogle()}
-            >
-              {busy === "connect" ? "Connecting…" : "Connect"}
-            </button>
-          {:else}
-            <button
-              type="button"
-              class="bsplus-cal-action bsplus-cal-action--primary"
-              style:--bsplus-cal-accent={accent}
-              role="menuitem"
-              disabled={isBusy}
-              onclick={() => void syncTimetable()}
-            >
-              {busy === "sync" ? "Syncing…" : "Sync now"}
-            </button>
-            <button
-              type="button"
-              class="bsplus-cal-action bsplus-cal-action--ghost"
-              role="menuitem"
-              disabled={isBusy}
-              onclick={() => {
-                showDeleteEvents = true;
-              }}
-            >
-              {busy === "delete" ? "Removing…" : "Remove from calendar"}
-            </button>
-            <button
-              type="button"
-              class="bsplus-cal-action bsplus-cal-action--ghost"
-              role="menuitem"
-              disabled={isBusy}
-              onclick={() => {
-                showDisconnect = true;
-              }}
-            >
-              Disconnect
-            </button>
-          {/if}
-        </div>
-      </div>
-
       <div class="bsplus-cal-coming-soon" role="none">
         <span class="bsplus-cal-coming-soon-label">More providers</span>
-        <span class="bsplus-cal-coming-soon-hint">Outlook, Apple Calendar — coming soon</span>
+        <span class="bsplus-cal-coming-soon-hint">Apple Calendar — coming soon</span>
       </div>
     </div>
   {/if}
 
   <CalendarDeleteEventsModal
     open={showDeleteEvents}
-    busy={busy === "delete"}
+    busy={busy?.phase === "delete"}
+    providerLabel={modalProvider === "outlook" ? "Outlook" : "Google"}
     onCancel={() => {
-      if (busy !== "delete") showDeleteEvents = false;
+      if (busy?.phase !== "delete") showDeleteEvents = false;
     }}
     onConfirm={confirmDeleteEvents}
   />
 
   <CalendarDisconnectModal
     open={showDisconnect}
-    busy={busy === "disconnect"}
+    busy={busy?.phase === "disconnect"}
+    providerLabel={modalProvider === "outlook" ? "Outlook" : "Google"}
     onCancel={() => {
-      if (busy !== "disconnect") showDisconnect = false;
+      if (busy?.phase !== "disconnect") showDisconnect = false;
     }}
     onConfirm={confirmDisconnect}
   />
@@ -530,7 +665,7 @@
   .bsplus-cal-sync {
     position: relative;
     display: inline-flex;
-    font-family: Rubik, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    font-family: var(--bsplus-cal-font-family, var(--betterseqta-font-family, Rubik), sans-serif);
     color: var(--bsplus-cal-text, var(--text-primary, #111));
   }
 
@@ -545,16 +680,19 @@
     padding: 0 10px;
     margin-left: 4px;
     border-radius: 16px !important;
+    font-family: inherit;
     transition: all 0.2s ease;
   }
 
   .bsplus-cal-trigger-icon {
+    font-family: "IconFamily" !important;
     font-size: 16px;
     line-height: 1;
     opacity: 0.9;
   }
 
   .bsplus-cal-trigger-text {
+    font-family: inherit;
     font-size: 13px;
     font-weight: 600;
     line-height: 1;
@@ -680,7 +818,7 @@
     color: var(--bsplus-cal-text, #18181b);
     border: 1px solid var(--bsplus-cal-border, color-mix(in srgb, var(--bsplus-cal-text) 12%, transparent));
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
-    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    font-family: var(--bsplus-cal-font-family, var(--betterseqta-font-family, Rubik), sans-serif);
   }
 
   .bsplus-cal-menu.dark {
@@ -710,6 +848,11 @@
     padding: 8px;
     border-radius: 10px;
     background: var(--bsplus-cal-surface-muted, color-mix(in srgb, var(--bsplus-cal-text) 4%, transparent));
+    margin-bottom: 8px;
+  }
+
+  .bsplus-cal-provider--outlook {
+    margin-bottom: 0;
   }
 
   .bsplus-cal-provider-row {

src/plugins/built-in/timetable/OutlookCalendarIcon.svelte

@@ -0,0 +1,231 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="60 90.4 570.02 539.67" aria-hidden="true">
+  <defs>
+    <linearGradient
+      id="bsplus-outlook-linear0"
+      gradientUnits="userSpaceOnUse"
+      x1="9.98908"
+      y1="22.364901"
+      x2="30.932199"
+      y2="9.37495"
+      gradientTransform="matrix(15,0,0,15,0,0)"
+    >
+      <stop offset="0" style="stop-color:rgb(12.54902%,65.490196%,98.039216%);stop-opacity:1;" />
+      <stop offset="0.4" style="stop-color:rgb(23.137255%,83.529412%,100%);stop-opacity:1;" />
+      <stop offset="1" style="stop-color:rgb(76.862745%,69.019608%,100%);stop-opacity:1;" />
+    </linearGradient>
+    <linearGradient
+      id="bsplus-outlook-linear1"
+      gradientUnits="userSpaceOnUse"
+      x1="17.197201"
+      y1="26.7945"
+      x2="28.856199"
+      y2="8.12575"
+      gradientTransform="matrix(15,0,0,15,0,0)"
+    >
+      <stop offset="0" style="stop-color:rgb(8.627451%,35.294118%,85.098039%);stop-opacity:1;" />
+      <stop offset="0.5008" style="stop-color:rgb(9.411765%,50.196078%,89.803922%);stop-opacity:1;" />
+      <stop offset="1" style="stop-color:rgb(52.156863%,52.941176%,100%);stop-opacity:1;" />
+    </linearGradient>
+    <linearGradient
+      id="bsplus-outlook-linear2"
+      gradientUnits="userSpaceOnUse"
+      x1="25.7005"
+      y1="27.048401"
+      x2="12.7563"
+      y2="16.501301"
+      gradientTransform="matrix(15,0,0,15,0,0)"
+    >
+      <stop offset="0.236946" style="stop-color:rgb(26.666667%,54.117647%,100%);stop-opacity:0;" />
+      <stop offset="0.792113" style="stop-color:rgb(0%,19.607843%,69.411765%);stop-opacity:0.2;" />
+    </linearGradient>
+    <linearGradient
+      id="bsplus-outlook-linear3"
+      gradientUnits="userSpaceOnUse"
+      x1="24.0534"
+      y1="31.1099"
+      x2="44.509998"
+      y2="18.0177"
+      gradientTransform="matrix(15,0,0,15,0,0)"
+    >
+      <stop offset="0" style="stop-color:rgb(10.196078%,26.27451%,65.098039%);stop-opacity:1;" />
+      <stop offset="0.492267" style="stop-color:rgb(12.54902%,32.156863%,79.607843%);stop-opacity:1;" />
+      <stop offset="1" style="stop-color:rgb(37.254902%,12.54902%,79.607843%);stop-opacity:1;" />
+    </linearGradient>
+    <linearGradient
+      id="bsplus-outlook-linear4"
+      gradientUnits="userSpaceOnUse"
+      x1="29.8281"
+      y1="30.327299"
+      x2="17.397499"
+      y2="19.570801"
+      gradientTransform="matrix(15,0,0,15,0,0)"
+    >
+      <stop offset="0" style="stop-color:rgb(0%,27.058824%,72.54902%);stop-opacity:0;" />
+      <stop offset="0.669859" style="stop-color:rgb(5.098039%,12.156863%,41.176471%);stop-opacity:0.2;" />
+    </linearGradient>
+    <radialGradient
+      id="bsplus-outlook-radial0"
+      gradientUnits="userSpaceOnUse"
+      cx="0"
+      cy="0"
+      fx="0"
+      fy="0"
+      r="1"
+      gradientTransform="matrix(0.000000000000024802,-405.040512,438.393002,0.000000000000026844,360.027008,102.268202)"
+    >
+      <stop offset="0.568182" style="stop-color:rgb(15.294118%,37.254902%,94.117647%);stop-opacity:0;" />
+      <stop offset="0.992424" style="stop-color:rgb(0%,12.941176%,46.666667%);stop-opacity:1;" />
+    </radialGradient>
+    <linearGradient
+      id="bsplus-outlook-linear5"
+      gradientUnits="userSpaceOnUse"
+      x1="41.998001"
+      y1="29.9431"
+      x2="23.8517"
+      y2="29.9431"
+      gradientTransform="matrix(15,0,0,15,0,0)"
+    >
+      <stop offset="0" style="stop-color:rgb(30.196078%,76.862745%,100%);stop-opacity:1;" />
+      <stop offset="0.196145" style="stop-color:rgb(5.882353%,68.627451%,100%);stop-opacity:1;" />
+    </linearGradient>
+    <radialGradient
+      id="bsplus-outlook-radial1"
+      gradientUnits="userSpaceOnUse"
+      cx="0"
+      cy="0"
+      fx="0"
+      fy="0"
+      r="1"
+      gradientTransform="matrix(122.73959,-122.73959,122.73959,122.73959,421.392002,568.675518)"
+    >
+      <stop offset="0.259477" style="stop-color:rgb(0%,37.647059%,81.960784%);stop-opacity:0.4;" />
+      <stop offset="0.908166" style="stop-color:rgb(1.176471%,51.372549%,94.509804%);stop-opacity:0;" />
+    </radialGradient>
+    <radialGradient
+      id="bsplus-outlook-radial2"
+      gradientUnits="userSpaceOnUse"
+      cx="0"
+      cy="0"
+      fx="0"
+      fy="0"
+      r="1"
+      gradientTransform="matrix(357.407022,-468.445926,423.594568,323.187085,159.471002,697.080002)"
+    >
+      <stop offset="0.732317" style="stop-color:rgb(95.686275%,65.490196%,96.862745%);stop-opacity:0;" />
+      <stop offset="1" style="stop-color:rgb(95.686275%,65.490196%,96.862745%);stop-opacity:0.501961;" />
+    </radialGradient>
+    <radialGradient
+      id="bsplus-outlook-radial3"
+      gradientUnits="userSpaceOnUse"
+      cx="0"
+      cy="0"
+      fx="0"
+      fy="0"
+      r="1"
+      gradientTransform="matrix(-170.860868,259.725406,-674.018133,-443.404152,278.562012,412.978506)"
+    >
+      <stop offset="0" style="stop-color:rgb(28.627451%,87.058824%,100%);stop-opacity:1;" />
+      <stop offset="0.724349" style="stop-color:rgb(16.078431%,76.470588%,100%);stop-opacity:1;" />
+    </radialGradient>
+    <linearGradient
+      id="bsplus-outlook-linear6"
+      gradientUnits="userSpaceOnUse"
+      x1="3.45756"
+      y1="37.872299"
+      x2="20.9291"
+      y2="37.859699"
+      gradientTransform="matrix(15,0,0,15,0,0)"
+    >
+      <stop offset="0.205882" style="stop-color:rgb(42.352941%,87.843137%,100%);stop-opacity:1;" />
+      <stop offset="0.535" style="stop-color:rgb(31.372549%,83.529412%,100%);stop-opacity:0;" />
+    </linearGradient>
+    <radialGradient
+      id="bsplus-outlook-radial4"
+      gradientUnits="userSpaceOnUse"
+      cx="0"
+      cy="0"
+      fx="0"
+      fy="0"
+      r="1"
+      gradientTransform="matrix(215.76719,230.769125,-230.769125,215.76719,59.143649,354.231005)"
+    >
+      <stop offset="0.038877" style="stop-color:rgb(0%,56.862745%,100%);stop-opacity:1;" />
+      <stop offset="0.919119" style="stop-color:rgb(9.411765%,23.921569%,67.843137%);stop-opacity:1;" />
+    </radialGradient>
+    <radialGradient
+      id="bsplus-outlook-radial5"
+      gradientUnits="userSpaceOnUse"
+      cx="0"
+      cy="0"
+      fx="0"
+      fy="0"
+      r="1"
+      gradientTransform="matrix(0.000000000000010287,167.999997,-193.782005,0.000000000000011866,180,491.158504)"
+    >
+      <stop offset="0.557796" style="stop-color:rgb(5.882353%,64.705882%,96.862745%);stop-opacity:0;" />
+      <stop offset="1" style="stop-color:rgb(45.490196%,77.647059%,100%);stop-opacity:0.501961;" />
+    </radialGradient>
+  </defs>
+  <g>
+    <path
+      style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear0);"
+      d="M 463.984375 140.144531 L 119.636719 358.414062 L 90.023438 311.695312 L 90.023438 271.4375 C 90.023438 256.78125 97.445312 243.121094 109.742188 235.144531 L 309.910156 105.257812 C 340.40625 85.46875 379.6875 85.464844 410.1875 105.25 Z M 463.984375 140.144531 "
+    />
+    <path
+      style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear1);"
+      d="M 407.101562 103.339844 C 408.136719 103.953125 409.164062 104.59375 410.183594 105.253906 L 566.398438 206.585938 L 179.0625 452.105469 L 119.625 358.335938 L 403.894531 177.800781 C 430.820312 160.699219 432 122.230469 407.101562 103.339844 Z M 407.101562 103.339844 "
+    />
+    <path
+      style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear2);"
+      d="M 407.101562 103.339844 C 408.136719 103.953125 409.164062 104.59375 410.183594 105.253906 L 566.398438 206.585938 L 179.0625 452.105469 L 119.625 358.335938 L 403.894531 177.800781 C 430.820312 160.699219 432 122.230469 407.101562 103.339844 Z M 407.101562 103.339844 "
+    />
+    <path
+      style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear3);"
+      d="M 333.601562 498.988281 L 179.066406 452.109375 L 507.628906 243.835938 C 535.300781 226.296875 535.230469 185.898438 507.496094 168.457031 L 506.015625 167.527344 L 510.277344 170.175781 L 610.273438 235.042969 C 622.574219 243.019531 629.996094 256.683594 629.996094 271.34375 L 629.996094 310.304688 Z M 333.601562 498.988281 "
+    />
+    <path
+      style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear4);"
+      d="M 333.601562 498.988281 L 179.066406 452.109375 L 507.628906 243.835938 C 535.300781 226.296875 535.230469 185.898438 507.496094 168.457031 L 506.015625 167.527344 L 510.277344 170.175781 L 610.273438 235.042969 C 622.574219 243.019531 629.996094 256.683594 629.996094 271.34375 L 629.996094 310.304688 Z M 333.601562 498.988281 "
+    />
+    <path
+      style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-radial0);"
+      d="M 410.1875 105.25 C 379.6875 85.464844 340.40625 85.46875 309.90625 105.257812 L 109.742188 235.144531 C 97.445312 243.121094 90.023438 256.78125 90.023438 271.4375 L 90.023438 273.40625 C 90.507812 288.121094 98.25 301.679688 110.757812 309.566406 L 359.644531 466.476562 L 609.160156 309.804688 C 622.121094 301.667969 629.984375 287.441406 629.984375 272.140625 L 629.984375 310.308594 L 629.992188 271.34375 C 629.992188 256.683594 622.566406 243.023438 610.269531 235.042969 Z M 410.1875 105.25 "
+    />
+    <path
+      style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear5);"
+      d="M 315.769531 630.050781 L 536.21875 630.050781 C 587.996094 630.050781 629.96875 588.078125 629.96875 536.300781 L 629.96875 272.140625 C 629.96875 287.441406 622.105469 301.667969 609.148438 309.804688 L 281.242188 515.695312 C 263.554688 526.804688 252.820312 546.222656 252.820312 567.109375 C 252.824219 601.871094 281.003906 630.050781 315.769531 630.050781 Z M 315.769531 630.050781 "
+    />
+    <path
+      style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-radial1);"
+      d="M 315.769531 630.050781 L 536.21875 630.050781 C 587.996094 630.050781 629.96875 588.078125 629.96875 536.300781 L 629.96875 272.140625 C 629.96875 287.441406 622.105469 301.667969 609.148438 309.804688 L 281.242188 515.695312 C 263.554688 526.804688 252.820312 546.222656 252.820312 567.109375 C 252.824219 601.871094 281.003906 630.050781 315.769531 630.050781 Z M 315.769531 630.050781 "
+    />
+    <path
+      style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-radial2);"
+      d="M 315.769531 630.050781 L 536.21875 630.050781 C 587.996094 630.050781 629.96875 588.078125 629.96875 536.300781 L 629.96875 272.140625 C 629.96875 287.441406 622.105469 301.667969 609.148438 309.804688 L 281.242188 515.695312 C 263.554688 526.804688 252.820312 546.222656 252.820312 567.109375 C 252.824219 601.871094 281.003906 630.050781 315.769531 630.050781 Z M 315.769531 630.050781 "
+    />
+    <path
+      style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-radial3);"
+      d="M 405.402344 630.035156 L 183.738281 630.035156 C 131.960938 630.035156 89.988281 588.0625 89.988281 536.285156 L 89.988281 271.945312 C 89.988281 287.21875 97.824219 301.421875 110.742188 309.566406 L 438.324219 516.085938 C 456.257812 527.390625 467.132812 547.113281 467.132812 568.3125 C 467.128906 602.402344 439.492188 630.035156 405.402344 630.035156 Z M 405.402344 630.035156 "
+    />
+    <path
+      style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear6);"
+      d="M 405.402344 630.035156 L 183.738281 630.035156 C 131.960938 630.035156 89.988281 588.0625 89.988281 536.285156 L 89.988281 271.945312 C 89.988281 287.21875 97.824219 301.421875 110.742188 309.566406 L 438.324219 516.085938 C 456.257812 527.390625 467.132812 547.113281 467.132812 568.3125 C 467.128906 602.402344 439.492188 630.035156 405.402344 630.035156 Z M 405.402344 630.035156 "
+    />
+    <path
+      style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-radial4);"
+      d="M 108.75 345 L 251.25 345 C 278.175781 345 300 366.824219 300 393.75 L 300 536.25 C 300 563.175781 278.175781 585 251.25 585 L 108.75 585 C 81.824219 585 60 563.175781 60 536.25 L 60 393.75 C 60 366.824219 81.824219 345 108.75 345 Z M 108.75 345 "
+    />
+    <path
+      style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-radial5);"
+      d="M 108.75 345 L 251.25 345 C 278.175781 345 300 366.824219 300 393.75 L 300 536.25 C 300 563.175781 278.175781 585 251.25 585 L 108.75 585 C 81.824219 585 60 563.175781 60 536.25 L 60 393.75 C 60 366.824219 81.824219 345 108.75 345 Z M 108.75 345 "
+    />
+    <path
+      style="stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;"
+      d="M 179.386719 534 C 159.539062 534 143.25 527.789062 130.511719 515.375 C 117.773438 502.960938 111.402344 486.757812 111.402344 466.769531 C 111.402344 445.660156 117.867188 428.589844 130.796875 415.550781 C 143.730469 402.515625 160.660156 396 181.59375 396 C 201.375 396 217.472656 402.238281 229.890625 414.714844 C 242.375 427.191406 248.617188 443.644531 248.617188 464.066406 C 248.617188 485.050781 242.148438 501.964844 229.21875 514.816406 C 216.351562 527.605469 199.742188 534 179.386719 534 Z M 179.960938 507.648438 C 190.777344 507.648438 199.484375 503.953125 206.078125 496.566406 C 212.671875 489.179688 215.96875 478.902344 215.96875 465.742188 C 215.96875 452.023438 212.765625 441.347656 206.367188 433.710938 C 199.964844 426.074219 191.417969 422.257812 180.730469 422.257812 C 169.71875 422.257812 160.851562 426.199219 154.132812 434.082031 C 147.410156 441.90625 144.050781 452.273438 144.050781 465.183594 C 144.050781 478.285156 147.410156 488.652344 154.132812 496.285156 C 160.851562 503.859375 169.460938 507.648438 179.960938 507.648438 Z M 179.960938 507.648438 "
+    />
+    <path
+      style="stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;"
+      d="M 179.332031 535.847656 C 159.5625 535.847656 143.332031 529.472656 130.640625 516.71875 C 117.953125 503.964844 111.605469 487.320312 111.605469 466.789062 C 111.605469 445.105469 118.046875 427.570312 130.929688 414.179688 C 143.8125 400.785156 160.679688 394.089844 181.53125 394.089844 C 201.234375 394.089844 217.273438 400.5 229.644531 413.316406 C 242.082031 426.136719 248.296875 443.035156 248.296875 464.015625 C 248.296875 485.566406 241.855469 502.945312 228.976562 516.144531 C 216.15625 529.28125 199.609375 535.847656 179.332031 535.847656 Z M 179.902344 508.78125 C 190.679688 508.78125 199.355469 504.984375 205.921875 497.398438 C 212.492188 489.808594 215.773438 479.253906 215.773438 465.734375 C 215.773438 451.640625 212.585938 440.675781 206.210938 432.832031 C 199.832031 424.988281 191.320312 421.066406 180.671875 421.066406 C 169.699219 421.066406 160.867188 425.113281 154.171875 433.214844 C 147.476562 441.246094 144.128906 451.898438 144.128906 465.160156 C 144.128906 478.617188 147.476562 489.265625 154.171875 497.109375 C 160.867188 504.890625 169.445312 508.78125 179.902344 508.78125 Z M 179.902344 508.78125 "
+    />
+  </g>
+</svg>

src/plugins/built-in/timetable/calendarSyncHost.css

@@ -20,4 +20,5 @@
 
 .bsplus-calendar-sync-mount {
   display: inline-flex;
+  font-family: var(--bsplus-cal-font-family, var(--betterseqta-font-family, Rubik), sans-serif);
 }

src/plugins/built-in/timetable/calendarSyncTheme.ts

@@ -1,5 +1,7 @@
 import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 import { extractSolidColor } from "@/seqta/ui/colors/parseCssColor";
+import { ensureFontLoaded } from "@/seqta/ui/fonts/Manager";
+import { getFontPreset } from "@/seqta/ui/fonts/presets";
 
 export const CALENDAR_THEME_CSS_VARS = [
   "--better-main",
@@ -42,6 +44,10 @@ function resolvePageAccentColor(): string {
 export function syncCalendarSyncTheme(target: HTMLElement): void {
   const computed = getComputedStyle(document.documentElement);
   const dark = isCalendarDarkMode();
+  const fontPreset = getFontPreset(settingsState.selectedFont);
+
+  ensureFontLoaded(fontPreset);
+  target.style.setProperty("--bsplus-cal-font-family", fontPreset.stack);
 
   for (const name of CALENDAR_THEME_CSS_VARS) {
     const value =

src/plugins/built-in/timetable/calendarSyncUi.ts

@@ -1,7 +1,7 @@
 import { mount, unmount } from "svelte";
 import CalendarSyncControl from "./CalendarSyncControl.svelte";
 import { syncCalendarSyncTheme } from "./calendarSyncTheme";
-import { registerGoogleCalendarContentHandlers } from "@/seqta/utils/googleCalendar/calendarSyncListener";
+import { registerCalendarContentHandlers } from "@/seqta/utils/googleCalendar/calendarSyncListener";
 import hostStyles from "./calendarSyncHost.css?inline";
 
 const CONTROLS_CLASS = "timetable-calendar-controls";
@@ -36,7 +36,7 @@ export async function mountGoogleCalendarButton(): Promise<void> {
   if (!toolbar) return;
 
   ensureHostStyles();
-  registerGoogleCalendarContentHandlers();
+  registerCalendarContentHandlers();
 
   const controls = document.createElement("div");
   controls.className = `${CONTROLS_CLASS} bsplus-timetable-control`;