diff --git a/apps/client/src/widgets/collections/calendar/index.css b/apps/client/src/widgets/collections/calendar/index.css
new file mode 100644
index 000000000..69b116a18
--- /dev/null
+++ b/apps/client/src/widgets/collections/calendar/index.css
@@ -0,0 +1,62 @@
+.calendar-view {
+    overflow: hidden;
+    position: relative;
+    height: 100%;
+    user-select: none;
+    padding: 10px;
+}
+
+.calendar-view a {
+    color: unset;
+}
+
+.search-result-widget-content .calendar-view {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.calendar-container {
+    height: 100%;
+    --fc-page-bg-color: var(--main-background-color);
+    --fc-border-color: var(--main-border-color);
+    --fc-neutral-bg-color: var(--launcher-pane-background-color);
+    --fc-list-event-hover-bg-color: var(--left-pane-item-hover-background);
+}
+
+.calendar-container .fc-toolbar.fc-header-toolbar {
+    margin-bottom: 0.5em;
+}
+
+.calendar-container .fc-list-sticky .fc-list-day > * {
+    z-index: 50;
+}
+
+body.desktop:not(.zen) .calendar-container .fc-toolbar.fc-header-toolbar {
+    padding-right: 5em;
+}
+
+.search-result-widget-content .calendar-view .fc-toolbar.fc-header-toolbar {
+    padding-right: unset !important;
+}
+
+.calendar-container .fc-toolbar-title {
+    font-size: 1.3rem;
+    font-weight: normal;
+}
+
+.calendar-container a.fc-event {
+    text-decoration: none;
+}
+
+.calendar-container .fc-button {
+    padding: 0.2em 0.5em;
+}
+
+.calendar-container .promoted-attribute {
+    font-size: 0.85em;
+    opacity: 0.85;
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/collections/calendar/index.tsx b/apps/client/src/widgets/collections/calendar/index.tsx
index 93ec300df..42b766b8f 100644
--- a/apps/client/src/widgets/collections/calendar/index.tsx
+++ b/apps/client/src/widgets/collections/calendar/index.tsx
@@ -2,6 +2,7 @@ import { PluginDef } from "@fullcalendar/core/index.js";
 import { ViewModeProps } from "../interface";
 import Calendar from "./calendar";
 import { useEffect, useState } from "preact/hooks";
+import "./index.css";
 
 interface CalendarViewData {
 
@@ -11,11 +12,13 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
     const plugins = usePlugins(false, false);
 
     return (plugins &&
-        <Calendar
-            plugins={plugins}
-            tabIndex={100}
-            view="dayGridMonth"
-        />
+        <div className="calendar-view">
+            <Calendar
+                plugins={plugins}
+                tabIndex={100}
+                view="dayGridMonth"
+            />
+        </div>
     );
 }
 
diff --git a/apps/client/src/widgets/view_widgets/calendar_view.ts b/apps/client/src/widgets/view_widgets/calendar_view.ts
index 1befd1bb5..d4e10a0fc 100644
--- a/apps/client/src/widgets/view_widgets/calendar_view.ts
+++ b/apps/client/src/widgets/view_widgets/calendar_view.ts
@@ -32,75 +32,6 @@ const LOCALE_MAPPINGS: Record<LOCALE_IDS, (() => Promise<{ default: LocaleInput
     en: null
 };
 
-const TPL = /*html*/`
-<div class="calendar-view">
-    <style>
-    .calendar-view {
-        overflow: hidden;
-        position: relative;
-        height: 100%;
-        user-select: none;
-        padding: 10px;
-    }
-
-    .calendar-view a {
-        color: unset;
-    }
-
-    .search-result-widget-content .calendar-view {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-    }
-
-    .calendar-container {
-        height: 100%;
-        --fc-page-bg-color: var(--main-background-color);
-        --fc-border-color: var(--main-border-color);
-        --fc-neutral-bg-color: var(--launcher-pane-background-color);
-        --fc-list-event-hover-bg-color: var(--left-pane-item-hover-background);
-    }
-
-    .calendar-container .fc-toolbar.fc-header-toolbar {
-        margin-bottom: 0.5em;
-    }
-
-    .calendar-container .fc-list-sticky .fc-list-day > * {
-        z-index: 50;
-    }
-
-    body.desktop:not(.zen) .calendar-container .fc-toolbar.fc-header-toolbar {
-        padding-right: 5em;
-    }
-
-    .search-result-widget-content .calendar-view .fc-toolbar.fc-header-toolbar {
-        padding-right: unset !important;
-    }
-
-    .calendar-container .fc-toolbar-title {
-        font-size: 1.3rem;
-        font-weight: normal;
-    }
-
-    .calendar-container a.fc-event {
-        text-decoration: none;
-    }
-
-    .calendar-container .fc-button {
-        padding: 0.2em 0.5em;
-    }
-
-    .calendar-container .promoted-attribute {
-        font-size: 0.85em;
-        opacity: 0.85;
-        overflow: hidden;
-    }
-    </style>
-</div>
-`;
-
 // TODO: Deduplicate
 interface CreateChildResponse {
     note: {